Skip to content

Commit 8375109

Browse files
author
kqlio67
committed
Add orientation checkbox, refine conversation logic, and clean up collapsibles.
- Added orientation checkbox - Improved conversation loading - Handled share conversation logic - Refined prompt toggling - Cleaned collapsible sections
1 parent 53c4198 commit 8375109

File tree

2 files changed

+51
-92
lines changed

2 files changed

+51
-92
lines changed

‎g4f/gui/client/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,11 @@
178178
<input type="checkbox" id="countTokens" checked/>
179179
<label for="countTokens" class="toogle" title=""></label>
180180
</div>
181+
<div class="field">
182+
<span class="label">Automatic Orientation (16:9 or 9:16)</span>
183+
<input type="checkbox" id="automaticOrientation" checked/>
184+
<label for="automaticOrientation" class="toogle" title=""></label>
185+
</div>
181186

182187
<!-- Box fields -->
183188
<div class="field box">

‎g4f/gui/client/static/js/chat.v1.js

Lines changed: 46 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -575,6 +575,7 @@ const handle_ask = async (do_ask_gpt = true, message = null) => {
575575
}
576576
} else {
577577
await safe_load_conversation(window.conversation_id, true);
578+
await load_conversations();
578579
}
579580
};
580581

@@ -1330,7 +1331,12 @@ const delete_conversation = async (conversation_id) => {
13301331
}
13311332
}
13321333
}
1333-
1334+
if (window.share_id && conversation_id == window.start_id) {
1335+
const url = `${window.share_url}/backend-api/v2/files/${window.share_id}`;
1336+
await fetch(url, {
1337+
method: 'DELETE'
1338+
});
1339+
}
13341340
appStorage.removeItem(`conversation:${conversation_id}`);
13351341
const item = document.getElementById(`convo-${conversation_id}`);
13361342
item.remove();
@@ -1360,7 +1366,9 @@ const set_conversation = async (conversation_id) => {
13601366
};
13611367

13621368
const new_conversation = async () => {
1363-
history.pushState({}, null, `/chat/`);
1369+
if (!/\/chat\/(share|\?|$)/.test(window.location.href)) {
1370+
history.pushState({}, null, `/chat/`);
1371+
}
13641372
window.conversation_id = generateUUID();
13651373
document.title = window.title || document.title;
13661374
document.querySelector(".chat-top-panel .convo-title").innerText = "New Conversation";
@@ -1429,16 +1437,16 @@ const load_conversation = async (conversation, scroll=true) => {
14291437
let messages = conversation?.items || [];
14301438
console.debug("Conversation:", conversation.id)
14311439

1432-
let title = conversation.new_title || conversation.title;
1433-
title = title ? `${title} - G4F` : window.title;
1440+
let conversation_title = conversation.new_title || conversation.title;
1441+
title = conversation_title ? `${conversation_title} - G4F` : window.title;
14341442
if (title) {
14351443
document.title = title;
14361444
}
1437-
const convoTitle = document.querySelector(".chat-top-panel .convo-title");
1445+
const chatHeader = document.querySelector(".chat-top-panel .convo-title");
14381446
if (window.share_id && conversation.id == window.start_id) {
1439-
convoTitle.innerHTML = '<i class="fa-solid fa-qrcode"></i> ' + escapeHtml(title);
1447+
chatHeader.innerHTML = '<i class="fa-solid fa-qrcode"></i> ' + escapeHtml(conversation_title);
14401448
} else {
1441-
convoTitle.innerText = title;
1449+
chatHeader.innerText = conversation_title;
14421450
}
14431451

14441452
if (chatPrompt) {
@@ -2248,11 +2256,20 @@ window.addEventListener('load', async function() {
22482256
return await load_conversation(JSON.parse(appStorage.getItem(`conversation:${window.conversation_id}`)));
22492257
}
22502258
let conversation = await response.json();
2251-
if (!window.conversation_id || conversation.id == window.conversation_id) {
2252-
window.conversation_id = conversation.id;
2253-
await load_conversation(conversation);
2254-
await save_conversation(window.conversation_id, JSON.stringify(conversation));
2259+
if (!appStorage.getItem(`conversation:${window.conversation_id}`) || conversation.id == window.conversation_id) {
2260+
// Copy conversation from share
2261+
if (conversation.id != window.conversation_id) {
2262+
window.conversation_id = conversation.id;
2263+
conversation.updated = Date.now();
2264+
window.share_id = null;
2265+
}
2266+
await load_conversation(conversation);
2267+
await save_conversation(conversation.id, JSON.stringify(conversation));
22552268
await load_conversations();
2269+
if (!window.share_id) {
2270+
// Continue after copy conversation
2271+
return;
2272+
}
22562273
let refreshOnHide = true;
22572274
document.addEventListener("visibilitychange", () => {
22582275
if (document.hidden) {
@@ -2261,6 +2278,7 @@ window.addEventListener('load', async function() {
22612278
refreshOnHide = true;
22622279
}
22632280
});
2281+
// Start chat mode (QRCode)
22642282
var refreshIntervalId = setInterval(async () => {
22652283
if (!window.share_id) {
22662284
clearInterval(refreshIntervalId);
@@ -2297,29 +2315,6 @@ window.addEventListener('load', async function() {
22972315
await safe_load_conversation(window.conversation_id, false);
22982316
});
22992317

2300-
document.addEventListener("DOMContentLoaded", function () {
2301-
document.querySelectorAll(".collapsible-header").forEach(header => {
2302-
header.addEventListener("click", function () {
2303-
const content = this.nextElementSibling;
2304-
2305-
const isOpen = !content.classList.contains("hidden");
2306-
2307-
document.querySelectorAll(".collapsible-content").forEach(section => {
2308-
section.style.display = "none";
2309-
section.style.maxHeight = "0";
2310-
section.classList.add("hidden");
2311-
});
2312-
2313-
if (!isOpen) {
2314-
content.style.display = "block";
2315-
content.style.maxHeight = content.scrollHeight + "px";
2316-
content.classList.remove("hidden");
2317-
}
2318-
});
2319-
});
2320-
});
2321-
2322-
23232318
window.addEventListener('DOMContentLoaded', async function() {
23242319
await on_load();
23252320
if (window.conversation_id == "{{conversation_id}}") {
@@ -2332,16 +2327,6 @@ window.addEventListener('DOMContentLoaded', async function() {
23322327
await loadAllProviders();
23332328
});
23342329

2335-
// Also try loading when the settings panel is opened
2336-
document.addEventListener('DOMContentLoaded', function() {
2337-
const settingsIcon = document.querySelector('.settings_icon');
2338-
if (settingsIcon) {
2339-
settingsIcon.addEventListener('click', function() {
2340-
setTimeout(loadAllProviders, 500);
2341-
});
2342-
}
2343-
});
2344-
23452330
window.addEventListener('pywebviewready', async function() {
23462331
await on_api();
23472332
});
@@ -2350,22 +2335,17 @@ async function on_load() {
23502335
count_input();
23512336
if (/\/settings\//.test(window.location.href)) {
23522337
open_settings();
2353-
} else if (/\/chat\/share/.test(window.location.href)) {
2338+
} else if (/\/chat\/(share|\?|$)/.test(window.location.href)) {
23542339
chatPrompt.value = document.getElementById("systemPrompt")?.value || "";
23552340
let chat_url = new URL(window.location.href)
23562341
let chat_params = new URLSearchParams(chat_url.search);
23572342
if (chat_params.get("prompt")) {
23582343
userInput.value = chat_params.get("prompt");
23592344
userInput.style.height = userInput.scrollHeight + "px";
23602345
userInput.focus();
2361-
//await handle_ask();
2346+
} else {
2347+
new_conversation();
23622348
}
2363-
} else if (/\/chat\/[?$]/.test(window.location.href)) {
2364-
chatPrompt.value = document.getElementById("systemPrompt")?.value || "";
2365-
say_hello();
2366-
} else if (window.location.pathname === "/chat/") {
2367-
// When the URL is exactly "/chat/" with trailing slash, create a new conversation
2368-
await new_conversation();
23692349
} else {
23702350
//load_conversation(window.conversation_id);
23712351
}
@@ -2414,7 +2394,6 @@ const load_provider_option = (input, provider_name) => {
24142394
async function on_api() {
24152395
load_version();
24162396
let prompt_lock = false;
2417-
setupCollapsibleFields();
24182397
userInput.addEventListener("keydown", async (evt) => {
24192398
if (prompt_lock) return;
24202399
// If not mobile and not shift enter
@@ -2550,23 +2529,8 @@ async function on_api() {
25502529
});
25512530

25522531
providersContainer.querySelector(".collapsible-header").addEventListener('click', (e) => {
2553-
const header = providersContainer.querySelector(".collapsible-header");
2554-
const content = providersContainer.querySelector(".collapsible-content");
2555-
2556-
header.classList.toggle('active');
2557-
if (content.classList.contains('hidden')) {
2558-
content.classList.remove('hidden');
2559-
content.style.display = "block";
2560-
setTimeout(() => {
2561-
content.style.maxHeight = (content.scrollHeight + 100) + "px";
2562-
}, 10);
2563-
} else {
2564-
content.style.maxHeight = "0";
2565-
setTimeout(() => {
2566-
content.classList.add('hidden');
2567-
content.style.display = "none";
2568-
}, 300);
2569-
}
2532+
providersContainer.querySelector(".collapsible-content").classList.toggle('hidden');
2533+
providersContainer.querySelector(".collapsible-header").classList.toggle('active');
25702534
});
25712535
}
25722536

@@ -2610,23 +2574,8 @@ async function on_api() {
26102574
}
26112575

26122576
providersListContainer.querySelector(".collapsible-header").addEventListener('click', (e) => {
2613-
const header = providersListContainer.querySelector(".collapsible-header");
2614-
const content = providersListContainer.querySelector(".collapsible-content");
2615-
2616-
header.classList.toggle('active');
2617-
if (content.classList.contains('hidden')) {
2618-
content.classList.remove('hidden');
2619-
content.style.display = "block";
2620-
setTimeout(() => {
2621-
content.style.maxHeight = (content.scrollHeight + 100) + "px";
2622-
}, 10);
2623-
} else {
2624-
content.style.maxHeight = "0";
2625-
setTimeout(() => {
2626-
content.classList.add('hidden');
2627-
content.style.display = "none";
2628-
}, 300);
2629-
}
2577+
providersListContainer.querySelector(".collapsible-content").classList.toggle('hidden');
2578+
providersListContainer.querySelector(".collapsible-header").classList.toggle('active');
26302579
});
26312580

26322581
register_settings_storage();
@@ -2653,14 +2602,19 @@ async function on_api() {
26532602

26542603
// Handle checkbox change
26552604
hide_systemPrompt.addEventListener('change', async (event) => {
2656-
updateSystemPromptVisibility(event.target.checked);
2605+
if (event.target.checked) {
2606+
chatPrompt.classList.add("hidden");
2607+
} else {
2608+
chatPrompt.classList.remove("hidden");
2609+
}
26572610
});
26582611

26592612
// Handle slide-header click
26602613
document.querySelector(".slide-header")?.addEventListener("click", () => {
2661-
const isCurrentlyVisible = !slide_systemPrompt_icon.classList.contains("fa-angles-down");
2662-
document.querySelector(".chat-top-panel").classList[isCurrentlyVisible ? "add": "remove"]("hidden");
2663-
updateSystemPromptVisibility(isCurrentlyVisible);
2614+
const checked = slide_systemPrompt_icon.classList.contains("fa-angles-up");
2615+
chatPrompt.classList[checked ? "add": "remove"]("hidden");
2616+
slide_systemPrompt_icon.classList[checked ? "remove": "add"]("fa-angles-up");
2617+
slide_systemPrompt_icon.classList[checked ? "add": "remove"]("fa-angles-down");
26642618
});
26652619
const userInputHeight = document.getElementById("message-input-height");
26662620
if (userInputHeight) {
@@ -2819,7 +2773,7 @@ function connectToSSE(url, do_refine, bucket_id) {
28192773
} else if (data.action == "media") {
28202774
inputCount.innerText = `File: ${data.filename}`;
28212775
const url = `/files/${bucket_id}/media/${data.filename}`;
2822-
const media = [{bucket_id: bucket_id, url: url}];
2776+
const media = [{bucket_id: bucket_id, url: url, name: data.filename}];
28232777
await handle_ask(false, media);
28242778
} else if (data.action == "load") {
28252779
inputCount.innerText = `Read data: ${formatFileSize(data.size)}`;

0 commit comments

Comments
 (0)