返回提交历史
Modified
g4f/gui/client/index.html
+251
-237
XFEstudio/gpt4free
feat(g4f/gui/client/index.html): add image album and enhance model/provider options
a49fce2f
代码差异
1 个文件
+251
-237
@@ -1,258 +1,272 @@
1
1
<!DOCTYPE html>
2
2
<html lang="en" data-framework="javascript">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
8
<meta name="description" content="A conversational AI system that listens, learns, and challenges">
9
<meta property="og:title" content="ChatGPT">
10
<meta property="og:image" content="https://openai.com/content/images/2022/11/ChatGPT.jpg">
11
<meta property="og:description" content="A conversational AI system that listens, learns, and challenges">
12
<meta property="og:url" content="https://g4f.ai">
13
<link rel="stylesheet" href="/static/css/style.css">
14
<link rel="apple-touch-icon" sizes="180x180" href="/static/img/apple-touch-icon.png">
15
<link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
16
<link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon-16x16.png">
17
<link rel="manifest" href="/static/img/site.webmanifest">
18
<script src="/static/js/icons.js"></script>
19
<script src="/static/js/highlightjs-copy.min.js"></script>
20
<script src="/static/js/chat.v1.js" defer></script>
21
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
22
<link rel="stylesheet" href="/static/css/dracula.min.css">
23
<script>
24
MathJax = {
25
chtml: {
26
scale: 1,
27
displayAlign: 'left'
28
}
29
};
30
</script>
31
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
32
<script type="module" src="https://cdn.jsdelivr.net/npm/mistral-tokenizer-js" async>
33
import mistralTokenizer from "mistral-tokenizer-js"
34
</script>
35
<script type="module" src="https://cdn.jsdelivr.net/gh/belladoreai/llama-tokenizer-js@master/llama-tokenizer.js" async>
36
import llamaTokenizer from "llama-tokenizer-js"
37
</script>
38
<script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
39
<script src="/static/js/text_to_speech/index.js" async></script>
40
<!--
41
<script src="/static/js/whisper-web/index.js" async></script>
42
-->
43
<script>
44
const user_image = '<img src="/static/img/user.png" alt="your avatar">';
45
const gpt_image = '<img src="/static/img/gpt.png" alt="your avatar">';
46
</script>
47
<script src="/static/js/highlight.min.js"></script>
48
<script>window.conversation_id = "{{chat_id}}"</script>
49
<title>g4f - gui</title>
50
</head>
51
52
<body>
53
<div class="gradient"></div>
54
<div class="row">
55
<div class="box conversations">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
7
<meta name="description" content="A conversational AI system that listens, learns, and challenges">
8
<meta property="og:title" content="ChatGPT">
9
<meta property="og:image" content="https://openai.com/content/images/2022/11/ChatGPT.jpg">
10
<meta property="og:description" content="A conversational AI system that listens, learns, and challenges">
11
<meta property="og:url" content="https://g4f.ai">
12
<link rel="stylesheet" href="/static/css/style.css">
13
<link rel="apple-touch-icon" sizes="180x180" href="/static/img/apple-touch-icon.png">
14
<link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
15
<link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon-16x16.png">
16
<link rel="manifest" href="/static/img/site.webmanifest">
17
<script src="/static/js/icons.js"></script>
18
<script src="/static/js/highlightjs-copy.min.js"></script>
19
<script src="/static/js/chat.v1.js" defer></script>
20
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
21
<link rel="stylesheet" href="/static/css/dracula.min.css">
22
<script>
23
MathJax = {
24
chtml: {
25
scale: 1,
26
displayAlign: 'left'
27
}
28
};
29
</script>
30
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
31
<script type="module" src="https://cdn.jsdelivr.net/npm/mistral-tokenizer-js" async>
32
import mistralTokenizer from "mistral-tokenizer-js"
33
</script>
34
<script type="module" src="https://cdn.jsdelivr.net/gh/belladoreai/llama-tokenizer-js@master/llama-tokenizer.js" async>
35
import llamaTokenizer from "llama-tokenizer-js"
36
</script>
37
<script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
38
<script src="/static/js/text_to_speech/index.js" async></script>
39
<!--
40
<script src="/static/js/whisper-web/index.js" async></script>
41
-->
42
<script>
43
const user_image = '<img src="/static/img/user.png" alt="your avatar">';
44
const gpt_image = '<img src="/static/img/gpt.png" alt="your avatar">';
45
</script>
46
<script src="/static/js/highlight.min.js"></script>
47
<script>window.conversation_id = "{{chat_id}}"</script>
48
<title>g4f - gui</title>
49
</head>
50
<body>
51
<div class="gradient"></div>
52
<div class="row">
53
<div class="box conversations">
56
54
<div class="top">
57
<button class="new_convo" onclick="new_conversation()">
58
<i class="fa-regular fa-plus"></i>
59
<span>New Conversation</span>
60
</button>
55
<button class="new_convo" onclick="new_conversation()">
56
<i class="fa-regular fa-plus"></i>
57
<span>New Conversation</span>
58
</button>
61
59
</div>
62
60
<div class="bottom_buttons">
63
<!--
64
<button onclick="open_album();">
65
<i class="fa-solid fa-toolbox"></i>
66
<span>Images Album</span>
67
</button>
68
-->
69
<button onclick="open_settings();">
70
<i class="fa-solid fa-toolbox"></i>
71
<span>Open Settings</span>
72
</button>
73
<div class="info">
74
<i class="fa-brands fa-discord"></i>
75
<span class="convo-title">discord ~ <a href="https://discord.gg/XfybzPXPH5">discord.gg/XfybzPXPH5</a>
76
</span>
77
</div>
78
<div class="info">
79
<i class="fa-brands fa-github"></i>
80
<span class="convo-title">github ~ <a href="https://github.com/xtekky/gpt4free">@xtekky/gpt4free</a>
81
</span>
82
</div>
83
<div class="info">
84
<i class="fa-solid fa-star"></i>
85
<span id="version_text" class="convo-title"></span>
86
</div>
61
<button onclick="open_album();">
62
<i class="fa-solid fa-toolbox"></i>
63
<span>Images Album</span>
64
</button>
65
<button onclick="open_settings();">
66
<i class="fa-solid fa-toolbox"></i>
67
<span>Open Settings</span>
68
</button>
69
<div class="info">
70
<i class="fa-brands fa-discord"></i>
71
<span class="convo-title">discord ~ <a href="https://discord.gg/XfybzPXPH5">discord.gg/XfybzPXPH5</a>
72
</span>
73
</div>
74
<div class="info">
75
<i class="fa-brands fa-github"></i>
76
<span class="convo-title">github ~ <a href="https://github.com/xtekky/gpt4free">@xtekky/gpt4free</a>
77
</span>
78
</div>
79
<div class="info">
80
<i class="fa-solid fa-star"></i>
81
<span id="version_text" class="convo-title"></span>
82
</div>
87
83
</div>
88
</div>
89
<div class="images hidden">
90
91
</div>
92
<div class="settings hidden">
84
</div>
85
<div class="images hidden">
86
</div>
87
<div class="settings hidden">
93
88
<div class="paper">
94
<h3>Settings</h3>
95
<div class="field">
96
<span class="label">Enable Dark Mode</span>
97
<input type="checkbox" id="darkMode" checked />
98
<label for="darkMode" class="toogle" title=""></label>
99
</div>
100
<div class="field">
101
<span class="label">Web Access with DuckDuckGo</span>
102
<input type="checkbox" id="switch" />
103
<label for="switch" class="toogle" title="Add the pages of the first 5 search results to the query."></label>
104
</div>
105
<div class="field">
106
<span class="label">Disable Conversation History</span>
107
<input type="checkbox" id="history" />
108
<label for="history" class="toogle" title="To improve the reaction time or if you have trouble with large conversations."></label>
109
</div>
110
<div class="field">
111
<span class="label">Hide System-prompt</span>
112
<input type="checkbox" id="hide-systemPrompt" />
113
<label for="hide-systemPrompt" class="toogle" title="For more space on phones"></label>
114
</div>
115
<div class="field">
116
<span class="label">Auto continue in ChatGPT</span>
117
<input id="auto_continue" type="checkbox" name="auto_continue" checked/>
118
<label for="auto_continue" class="toogle" title="Continue large responses in OpenaiChat"></label>
119
</div>
120
<div class="field box">
121
<label for="message-input-height" class="label" title="">Input max. height</label>
122
<input type="number" id="message-input-height" value="200"/>
123
</div>
124
<div class="field box">
125
<label for="recognition-language" class="label" title="">Speech recognition lang</label>
126
<input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
127
</div>
128
<div class="field box">
129
<label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label>
130
<textarea id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder=""_U" cookie"></textarea>
131
</div>
132
<div class="field box">
133
<label for="DeepInfra-api_key" class="label" title="">DeepInfra:</label>
134
<textarea id="DeepInfra-api_key" name="DeepInfra[api_key]" class="DeepInfraImage-api_key" placeholder="api_key"></textarea>
135
</div>
136
<div class="field box">
137
<label for="GeminiPro-api_key" class="label" title="">Gemini API:</label>
138
<textarea id="GeminiPro-api_key" name="GeminiPro[api_key]" placeholder="api_key"></textarea>
139
</div>
140
<div class="field box">
141
<label for="Groq-api_key" class="label" title="">Groq:</label>
142
<textarea id="Groq-api_key" name="Groq[api_key]" placeholder="api_key"></textarea>
143
</div>
144
<div class="field box">
145
<label for="HuggingFace-api_key" class="label" title="">HuggingFace:</label>
146
<textarea id="HuggingFace-api_key" name="HuggingFace[api_key]" placeholder="api_key"></textarea>
147
</div>
148
<div class="field box">
149
<label for="Openai-api_key" class="label" title="">OpenAI API:</label>
150
<textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
151
</div>
152
<div class="field box">
153
<label for="OpenRouter-api_key" class="label" title="">OpenRouter:</label>
154
<textarea id="OpenRouter-api_key" name="OpenRouter[api_key]" placeholder="api_key"></textarea>
155
</div>
156
<div class="field box">
157
<label for="PerplexityApi-api_key" class="label" title="">Perplexity API:</label>
158
<textarea id="PerplexityApi-api_key" name="PerplexityApi[api_key]" placeholder="api_key"></textarea>
159
</div>
160
<div class="field box">
161
<label for="Replicate-api_key" class="label" title="">Replicate:</label>
162
<textarea id="Replicate-api_key" name="Replicate[api_key]" class="ReplicateImage-api_key" placeholder="api_key"></textarea>
163
</div>
89
<h3>Settings</h3>
90
<div class="field">
91
<span class="label">Enable Dark Mode</span>
92
<input type="checkbox" id="darkMode" checked />
93
<label for="darkMode" class="toogle" title=""></label>
94
</div>
95
<div class="field">
96
<span class="label">Web Access with DuckDuckGo</span>
97
<input type="checkbox" id="switch" />
98
<label for="switch" class="toogle" title="Add the pages of the first 5 search results to the query."></label>
99
</div>
100
<div class="field">
101
<span class="label">Disable Conversation History</span>
102
<input type="checkbox" id="history" />
103
<label for="history" class="toogle" title="To improve the reaction time or if you have trouble with large conversations."></label>
104
</div>
105
<div class="field">
106
<span class="label">Hide System-prompt</span>
107
<input type="checkbox" id="hide-systemPrompt" />
108
<label for="hide-systemPrompt" class="toogle" title="For more space on phones"></label>
109
</div>
110
<div class="field">
111
<span class="label">Auto continue in ChatGPT</span>
112
<input id="auto_continue" type="checkbox" name="auto_continue" checked/>
113
<label for="auto_continue" class="toogle" title="Continue large responses in OpenaiChat"></label>
114
</div>
115
<div class="field box">
116
<label for="message-input-height" class="label" title="">Input max. height</label>
117
<input type="number" id="message-input-height" value="200"/>
118
</div>
119
<div class="field box">
120
<label for="recognition-language" class="label" title="">Speech recognition lang</label>
121
<input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
122
</div>
123
<div class="field box">
124
<label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label>
125
<textarea id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder=""_U" cookie"></textarea>
126
</div>
127
<div class="field box">
128
<label for="DeepInfra-api_key" class="label" title="">DeepInfra:</label>
129
<textarea id="DeepInfra-api_key" name="DeepInfra[api_key]" class="DeepInfraImage-api_key" placeholder="api_key"></textarea>
130
</div>
131
<div class="field box">
132
<label for="GeminiPro-api_key" class="label" title="">Gemini API:</label>
133
<textarea id="GeminiPro-api_key" name="GeminiPro[api_key]" placeholder="api_key"></textarea>
134
</div>
135
<div class="field box">
136
<label for="Groq-api_key" class="label" title="">Groq:</label>
137
<textarea id="Groq-api_key" name="Groq[api_key]" placeholder="api_key"></textarea>
138
</div>
139
<div class="field box">
140
<label for="HuggingFace-api_key" class="label" title="">HuggingFace:</label>
141
<textarea id="HuggingFace-api_key" name="HuggingFace[api_key]" placeholder="api_key"></textarea>
142
</div>
143
<div class="field box">
144
<label for="Openai-api_key" class="label" title="">OpenAI API:</label>
145
<textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
146
</div>
147
<div class="field box">
148
<label for="OpenRouter-api_key" class="label" title="">OpenRouter:</label>
149
<textarea id="OpenRouter-api_key" name="OpenRouter[api_key]" placeholder="api_key"></textarea>
150
</div>
151
<div class="field box">
152
<label for="PerplexityApi-api_key" class="label" title="">Perplexity API:</label>
153
<textarea id="PerplexityApi-api_key" name="PerplexityApi[api_key]" placeholder="api_key"></textarea>
154
</div>
155
<div class="field box">
156
<label for="Replicate-api_key" class="label" title="">Replicate:</label>
157
<textarea id="Replicate-api_key" name="Replicate[api_key]" class="ReplicateImage-api_key" placeholder="api_key"></textarea>
158
</div>
164
159
</div>
165
160
<div class="bottom_buttons">
166
<button onclick="delete_conversations()">
167
<i class="fa-regular fa-trash"></i>
168
<span>Clear Conversations</span>
169
</button>
170
<button onclick="save_storage()">
171
<i class="fa-solid fa-download"></i>
172
<a href="" onclick="return false;">Export Conversations</a>
173
</button>
161
<button onclick="delete_conversations()">
162
<i class="fa-regular fa-trash"></i>
163
<span>Clear Conversations</span>
164
</button>
165
<button onclick="save_storage()">
166
<i class="fa-solid fa-download"></i>
167
<a href="" onclick="return false;">Export Conversations</a>
168
</button>
174
169
</div>
175
</div>
176
<div class="conversation">
170
</div>
171
<div class="conversation">
177
172
<textarea id="systemPrompt" class="box" placeholder="System prompt"></textarea>
178
173
<div id="messages" class="box"></div>
179
174
<button class="slide-systemPrompt">
180
<i class="fa-solid fa-angles-up"></i>
175
<i class="fa-solid fa-angles-up"></i>
181
176
</button>
182
177
<div class="toolbar">
183
<div id="input-count" class="">
184
<button class="hide-input">
185
<i class="fa-solid fa-angles-down"></i>
186
</button>
187
<span class="text"></span>
188
</div>
189
<div class="stop_generating stop_generating-hidden">
190
<button id="cancelButton">
191
<span>Stop Generating</span>
192
<i class="fa-regular fa-stop"></i>
193
</button>
194
</div>
195
<div class="regenerate regenerate-hidden">
196
<button id="regenerateButton">
197
<span>Regenerate</span>
198
<i class="fa-solid fa-rotate"></i>
199
</button>
200
</div>
178
<div id="input-count" class="">
179
<button class="hide-input">
180
<i class="fa-solid fa-angles-down"></i>
181
</button>
182
<span class="text"></span>
183
</div>
184
<div class="stop_generating stop_generating-hidden">
185
<button id="cancelButton">
186
<span>Stop Generating</span>
187
<i class="fa-regular fa-stop"></i>
188
</button>
189
</div>
190
<div class="regenerate regenerate-hidden">
191
<button id="regenerateButton">
192
<span>Regenerate</span>
193
<i class="fa-solid fa-rotate"></i>
194
</button>
195
</div>
201
196
</div>
202
197
<div class="user-input">
203
<div class="box input-box">
204
<textarea id="message-input" placeholder="Ask a question" cols="30" rows="10"
205
style="white-space: pre-wrap;resize: none;"></textarea>
206
<label class="file-label image-label" for="image" title="Works with Bing, Gemini, OpenaiChat and You">
207
<input type="file" id="image" name="image" accept="image/*" required/>
208
<i class="fa-regular fa-image"></i>
209
</label>
210
<label class="file-label image-label" for="camera">
211
<input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/>
212
<i class="fa-solid fa-camera"></i>
213
</label>
214
<label class="file-label" for="file">
215
<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/>
216
<i class="fa-solid fa-paperclip"></i>
217
</label>
218
<label class="micro-label" for="micro">
219
<i class="fa-solid fa-microphone-slash"></i>
220
</label>
221
<div id="send-button">
222
<i class="fa-solid fa-paper-plane-top"></i>
223
</div>
224
</div>
198
<div class="box input-box">
199
<textarea id="message-input" placeholder="Ask a question" cols="30" rows="10"
200
style="white-space: pre-wrap;resize: none;"></textarea>
201
<label class="file-label image-label" for="image" title="Works with Bing, Gemini, OpenaiChat and You">
202
<input type="file" id="image" name="image" accept="image/*" required/>
203
<i class="fa-regular fa-image"></i>
204
</label>
205
<label class="file-label image-label" for="camera">
206
<input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/>
207
<i class="fa-solid fa-camera"></i>
208
</label>
209
<label class="file-label" for="file">
210
<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/>
211
<i class="fa-solid fa-paperclip"></i>
212
</label>
213
<label class="micro-label" for="micro">
214
<i class="fa-solid fa-microphone-slash"></i>
215
</label>
216
<div id="send-button">
217
<i class="fa-solid fa-paper-plane-top"></i>
218
</div>
219
</div>
225
220
</div>
226
221
<div class="buttons">
227
<div class="field">
228
<select name="model" id="model">
229
<option value="">Model: Default</option>
230
<option value="gpt-4">gpt-4</option>
231
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
232
<option value="llama-3-70b-chat">llama-3-70b-chat</option>
233
<option value="llama-3.1-70b">llama-3.1-70b</option>
234
<option value="gemini-pro">gemini-pro</option>
235
<option value="">----</option>
236
</select>
237
<select name="model2" id="model2" class="hidden"></select>
238
</div>
239
<div class="field">
240
<select name="provider" id="provider">
241
<option value="">Provider: Auto</option>
242
<option value="Bing">Bing</option>
243
<option value="OpenaiChat">OpenAI ChatGPT</option>
244
<option value="Gemini">Gemini</option>
245
<option value="Liaobots">Liaobots</option>
246
<option value="MetaAI">Meta AI</option>
247
<option value="You">You</option>
248
<option value="">----</option>
249
</select>
250
</div>
222
<div class="field">
223
<select name="model" id="model">
224
<option value="">Model: Default</option>
225
<option value="gpt-4">gpt-4</option>
226
<option value="gpt-4o">gpt-4o</option>
227
<option value="gpt-4o-mini">gpt-4o-mini</option>
228
<option value="llama-3.1-70b">llama-3.1-70b</option>
229
<option value="llama-3.1-70b">llama-3.1-405b</option>
230
<option value="llama-3.1-70b">mixtral-8x7b</option>
231
<option value="gemini-pro">gemini-pro</option>
232
<option value="gemini-flash">gemini-flash</option>
233
<option value="claude-3-haiku">claude-3-haiku</option>
234
<option value="claude-3.5-sonnet">claude-3.5-sonnet</option>
235
<option value="">----</option>
236
</select>
237
<select name="model2" id="model2" class="hidden"></select>
238
</div>
239
<div class="field">
240
<select name="provider" id="provider">
241
<option value="">Provider: Auto</option>
242
<option value="OpenaiChat">OpenAI ChatGPT</option>
243
<option value="Gemini">Gemini</option>
244
<option value="MetaAI">Meta AI</option>
245
<option value="DeepInfraChat">DeepInfraChat</option>
246
<option value="ReplicateHome">ReplicateHome</option>
247
<option value="Blackbox">Blackbox</option>
248
<option value="HuggingChat">HuggingChat</option>
249
<option value="DDG">DDG</option>
250
<option value="Pizzagpt">Pizzagpt</option>
251
<option value="">----</option>
252
</select>
253
</div>
251
254
</div>
252
</div>
253
</div>
254
<div class="mobile-sidebar">
255
<i class="fa-solid fa-bars"></i>
256
</div>
257
</body>
255
</div>
256
</div>
257
<div id="imageModal" class="modal hidden">
258
<span class="close">×</span>
259
<img class="modal-content" id="img01">
260
<div id="caption"></div>
261
<div class="navigation-controls">
262
<button id="prevImage" class="nav-button left">❮</button>
263
<span id="imageCounter" class="image-counter"></span>
264
<button id="nextImage" class="nav-button right">❯</button>
265
</div>
266
</div>
267
<div class="mobile-sidebar">
268
<i class="fa-solid fa-bars"></i>
269
</div>
270
</body>
258
271
</html>
272