summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client
diff options
context:
space:
mode:
authorHeiner Lohaus <hlohaus@users.noreply.github.com>2024-02-11 01:59:57 +0100
committerHeiner Lohaus <hlohaus@users.noreply.github.com>2024-02-11 01:59:57 +0100
commit6c422b2965d07e33a4c03fd7e1963316500bd527 (patch)
tree852bda60253d7dacf020c819362918b8fb426b48 /g4f/gui/client
parentUpdate image.py (diff)
downloadgpt4free-6c422b2965d07e33a4c03fd7e1963316500bd527.tar
gpt4free-6c422b2965d07e33a4c03fd7e1963316500bd527.tar.gz
gpt4free-6c422b2965d07e33a4c03fd7e1963316500bd527.tar.bz2
gpt4free-6c422b2965d07e33a4c03fd7e1963316500bd527.tar.lz
gpt4free-6c422b2965d07e33a4c03fd7e1963316500bd527.tar.xz
gpt4free-6c422b2965d07e33a4c03fd7e1963316500bd527.tar.zst
gpt4free-6c422b2965d07e33a4c03fd7e1963316500bd527.zip
Diffstat (limited to '')
-rw-r--r--g4f/gui/client/css/style.css25
-rw-r--r--g4f/gui/client/html/index.html8
-rw-r--r--g4f/gui/client/js/chat.v1.js51
3 files changed, 60 insertions, 24 deletions
diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css
index e03f36d2..8752dee5 100644
--- a/g4f/gui/client/css/style.css
+++ b/g4f/gui/client/css/style.css
@@ -404,7 +404,7 @@ body {
display: none;
}
-#image, #file {
+#image, #file, #camera {
display: none;
}
@@ -412,20 +412,37 @@ label[for="image"]:has(> input:valid){
color: var(--accent);
}
+label[for="camera"]:has(> input:valid){
+ color: var(--accent);
+}
+
label[for="file"]:has(> input:valid){
color: var(--accent);
}
-label[for="image"], label[for="file"] {
+label[for="image"], label[for="file"], label[for="camera"] {
cursor: pointer;
position: absolute;
top: 10px;
left: 10px;
}
-label[for="file"] {
+label[for="image"] {
top: 32px;
- left: 10px;
+}
+
+label[for="camera"] {
+ top: 54px;
+}
+
+label[for="camera"] {
+ display: none;
+}
+
+@media (pointer:none), (pointer:coarse) {
+ label[for="camera"] {
+ display: block;
+ }
}
.buttons input[type="checkbox"] {
diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html
index 55b54b48..175b7dc8 100644
--- a/g4f/gui/client/html/index.html
+++ b/g4f/gui/client/html/index.html
@@ -114,10 +114,14 @@
<div class="box input-box">
<textarea id="message-input" placeholder="Ask a question" cols="30" rows="10"
style="white-space: pre-wrap;resize: none;"></textarea>
- <label for="image" title="Works only with Bing and OpenaiChat">
- <input type="file" id="image" name="image" accept="image/png, image/gif, image/jpeg, image/svg+xml" required/>
+ <label for="image" title="Works only with Bing, Gemini and OpenaiChat">
+ <input type="file" id="image" name="image" accept="image/*" required/>
<i class="fa-regular fa-image"></i>
</label>
+ <label for="camera">
+ <input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/>
+ <i class="fa-solid fa-camera"></i>
+ </label>
<label for="file">
<input type="file" id="file" name="file" accept="text/plain, text/html, text/xml, application/json, text/javascript, .sh, .py, .php, .css, .yaml, .sql, .log, .csv, .twig, .md" required/>
<i class="fa-solid fa-paperclip"></i>
diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js
index 86eef8c9..4b2f1c1a 100644
--- a/g4f/gui/client/js/chat.v1.js
+++ b/g4f/gui/client/js/chat.v1.js
@@ -8,6 +8,7 @@ const stop_generating = document.querySelector(`.stop_generating`);
const regenerate = document.querySelector(`.regenerate`);
const send_button = document.querySelector(`#send-button`);
const imageInput = document.querySelector('#image');
+const cameraInput = document.querySelector('#camera');
const fileInput = document.querySelector('#file');
let prompt_lock = false;
@@ -63,6 +64,10 @@ const handle_ask = async () => {
? '<img src="' + imageInput.dataset.src + '" alt="Image upload">'
: ''
}
+ ${cameraInput.dataset.src
+ ? '<img src="' + cameraInput.dataset.src + '" alt="Image capture">'
+ : ''
+ }
</div>
</div>
`;
@@ -141,9 +146,10 @@ const ask_gpt = async () => {
const headers = {
accept: 'text/event-stream'
}
- if (imageInput && imageInput.files.length > 0) {
+ const input = imageInput && imageInput.files.length > 0 ? imageInput : cameraInput
+ if (input && input.files.length > 0) {
const formData = new FormData();
- formData.append('image', imageInput.files[0]);
+ formData.append('image', input.files[0]);
formData.append('json', body);
body = formData;
} else {
@@ -211,8 +217,11 @@ const ask_gpt = async () => {
message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" });
}
}
- if (!error && imageInput) imageInput.value = "";
- if (!error && fileInput) fileInput.value = "";
+ if (!error) {
+ if (imageInput) imageInput.value = "";
+ if (cameraInput) cameraInput.value = "";
+ if (fileInput) fileInput.value = "";
+ }
} catch (e) {
console.error(e);
@@ -668,21 +677,27 @@ observer.observe(message_input, { attributes: true });
}
document.getElementById("version_text").innerHTML = text
})()
-imageInput.addEventListener('click', async (event) => {
- imageInput.value = '';
- delete imageInput.dataset.src;
-});
-imageInput.addEventListener('change', async (event) => {
- if (imageInput.files.length) {
- const reader = new FileReader();
- reader.addEventListener('load', (event) => {
- imageInput.dataset.src = event.target.result;
- });
- reader.readAsDataURL(imageInput.files[0]);
- } else {
- delete imageInput.dataset.src;
+for (el of [imageInput, cameraInput]) {
+ console.log(el.files);
+ el.addEventListener('click', async () => {
+ el.value = '';
+ delete el.dataset.src;
+ });
+ do_load = async () => {
+ if (el.files.length) {
+ delete imageInput.dataset.src;
+ delete cameraInput.dataset.src;
+ const reader = new FileReader();
+ reader.addEventListener('load', (event) => {
+ el.dataset.src = event.target.result;
+ console.log(el.dataset.src);
+ });
+ reader.readAsDataURL(el.files[0]);
+ }
}
-});
+ do_load()
+ el.addEventListener('change', do_load);
+}
fileInput.addEventListener('click', async (event) => {
fileInput.value = '';
delete fileInput.dataset.text;