index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <!DOCTYPE html>
  2. <html lang="en">
  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="/assets/css/style.css">
  13. <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png">
  14. <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png">
  15. <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png">
  16. <link rel="manifest" href="/assets/img/site.webmanifest">
  17. <script src="/assets/js/icons.js"></script>
  18. <script src="/assets/js/highlightjs-copy.min.js"></script>
  19. <script src="/assets/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"
  22. href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/base16/dracula.min.css">
  23. <script>
  24. const user_image = `<img src="/assets/img/user.png" alt="your avatar">`;
  25. const gpt_image = `<img src="/assets/img/gpt.png" alt="your avatar">`;
  26. </script>
  27. <style>
  28. .hljs {
  29. color: #e9e9f4;
  30. background: #28293629;
  31. border-radius: var(--border-radius-1);
  32. border: 1px solid var(--blur-border);
  33. font-size: 15px;
  34. }
  35. #message-input {
  36. margin-right: 30px;
  37. height: 80px;
  38. }
  39. #message-input::-webkit-scrollbar {
  40. width: 5px;
  41. }
  42. /* Track */
  43. #message-input::-webkit-scrollbar-track {
  44. background: #f1f1f1;
  45. }
  46. /* Handle */
  47. #message-input::-webkit-scrollbar-thumb {
  48. background: #c7a2ff;
  49. }
  50. /* Handle on hover */
  51. #message-input::-webkit-scrollbar-thumb:hover {
  52. background: #8b3dff;
  53. }
  54. </style>
  55. <script src="/assets/js/highlight.min.js"></script>
  56. <script>window.conversation_id = `{{chat_id}}`</script>
  57. <title>g4f - gui</title>
  58. </head>
  59. <body>
  60. <div class="gradient"></div>
  61. <div class="row">
  62. <div class="box conversations">
  63. <div class="top">
  64. <button class="new_convo" onclick="new_conversation()">
  65. <i class="fa-regular fa-plus"></i>
  66. <span>New Conversation</span>
  67. </button>
  68. </div>
  69. <div class="bottom_buttons">
  70. <button onclick="delete_conversations()">
  71. <i class="fa-regular fa-trash"></i>
  72. <span>Clear Conversations</span>
  73. </button>
  74. <div class="info">
  75. <i class="fa-brands fa-telegram"></i>
  76. <span class="convo-title">tele ~ <a href="https://t.me/g4f_official">@g4f_official</a>
  77. </span>
  78. </div>
  79. <div class="info">
  80. <i class="fa-brands fa-github"></i>
  81. <span class="convo-title">github ~ <a href="https://github.com/xtekky/gpt4free">@gpt4free</a>
  82. </span>
  83. </div>
  84. <div class="info">
  85. <i class="fa-solid fa-star"></i>
  86. <span id="version_text" class="convo-title"></span>
  87. </div>
  88. </div>
  89. </div>
  90. <div class="conversation">
  91. <div class="stop_generating stop_generating-hidden">
  92. <button id="cancelButton">
  93. <span>Stop Generating</span>
  94. <i class="fa-regular fa-stop"></i>
  95. </button>
  96. </div>
  97. <div class="regenerate regenerate-hidden">
  98. <button id="regenerateButton">
  99. <span>Regenerate</span>
  100. <i class="fa-solid fa-rotate"></i>
  101. </button>
  102. </div>
  103. <div class="box" id="messages">
  104. </div>
  105. <div class="user-input">
  106. <div class="box input-box">
  107. <textarea id="message-input" placeholder="Ask a question" cols="30" rows="10"
  108. style="white-space: pre-wrap;resize: none;"></textarea>
  109. <div id="send-button">
  110. <i class="fa-solid fa-paper-plane-top"></i>
  111. </div>
  112. </div>
  113. </div>
  114. <div class="buttons">
  115. <div class="field">
  116. <input type="checkbox" id="switch" />
  117. <label for="switch"></label>
  118. <span class="about">Web Access</span>
  119. </div>
  120. <div class="field">
  121. <input type="checkbox" id="patch" />
  122. <label for="patch" title="Works only with Bing and some other providers"></label>
  123. <span class="about">Image Generator</span>
  124. </div>
  125. <div class="field">
  126. <select name="model" id="model">
  127. <option value="gpt-3.5-turbo" selected="">gpt-3.5-turbo</option>
  128. <option value="gpt-3.5-turbo-0613">gpt-3.5-turbo-0613</option>
  129. <option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
  130. <option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613</option>
  131. <option value="gpt-4">gpt-4</option>
  132. <option value="gpt-4-0613">gpt-4-0613</option>
  133. <option value="gpt-4-32k">gpt-4-32k</option>
  134. <option value="gpt-4-32k-0613">gpt-4-32k-0613</option>
  135. <option value="palm2">palm2</option>
  136. <option value="palm">palm</option>
  137. <option value="google">google</option>
  138. <option value="google-bard">google-bard</option>
  139. <option value="google-palm">google-palm</option>
  140. <option value="bard">bard</option>
  141. <option value="llama2-7b">llama2-7b</option>
  142. <option value="llama2-13b">llama2-13b</option>
  143. <option value="llama2-70b">llama2-70b</option>
  144. <option value="command-nightly">command-nightly</option>
  145. <option value="gpt-neox-20b">gpt-neox-20b</option>
  146. <option value="santacoder">santacoder</option>
  147. <option value="bloom">bloom</option>
  148. <option value="flan-t5-xxl">flan-t5-xxl</option>
  149. <option value="code-davinci-002">code-davinci-002</option>
  150. <option value="text-ada-001">text-ada-001</option>
  151. <option value="text-babbage-001">text-babbage-001</option>
  152. <option value="text-curie-001">text-curie-001</option>
  153. <option value="text-davinci-002">text-davinci-002</option>
  154. <option value="text-davinci-003">text-davinci-003</option>
  155. <option value="llama70b-v2-chat">llama70b-v2-chat</option>
  156. <option value="llama13b-v2-chat">llama13b-v2-chat</option>
  157. <option value="llama7b-v2-chat">llama7b-v2-chat</option>
  158. <option value="oasst-sft-1-pythia-12b">oasst-sft-1-pythia-12b</option>
  159. <option value="oasst-sft-4-pythia-12b-epoch-3.5">oasst-sft-4-pythia-12b-epoch-3.5</option>
  160. <option value="command-light-nightly">command-light-nightly</option>
  161. </select>
  162. </div>
  163. <div class="field">
  164. <select name="jailbreak" id="jailbreak">
  165. <option value="default" selected>Set Jailbreak</option>
  166. <option value="gpt-math-1.0">math 1.0</option>
  167. <option value="gpt-dude-1.0">dude 1.0</option>
  168. <option value="gpt-dan-1.0">dan 1.0</option>
  169. <option value="gpt-dan-2.0">dan 2.0</option>
  170. <option value="gpt-dev-2.0">dev 2.0</option>
  171. <option value="gpt-evil-1.0">evil 1.0</option>
  172. </select>
  173. <div class="field">
  174. <select name="provider" id="provider">
  175. <option value="g4f.Provider.Auto" selected>Set Provider</option>
  176. <option value="g4f.Provider.AItianhuSpace">AItianhuSpace</option>
  177. <option value="g4f.Provider.ChatgptLogin">ChatgptLogin</option>
  178. <option value="g4f.Provider.ChatgptDemo">ChatgptDemo</option>
  179. <option value="g4f.Provider.ChatgptDuo">ChatgptDuo</option>
  180. <option value="g4f.Provider.Vitalentum">Vitalentum</option>
  181. <option value="g4f.Provider.ChatgptAi">ChatgptAi</option>
  182. <option value="g4f.Provider.AItianhu">AItianhu</option>
  183. <option value="g4f.Provider.ChatBase">ChatBase</option>
  184. <option value="g4f.Provider.Liaobots">Liaobots</option>
  185. <option value="g4f.Provider.Yqcloud">Yqcloud</option>
  186. <option value="g4f.Provider.Myshell">Myshell</option>
  187. <option value="g4f.Provider.FreeGpt">FreeGpt</option>
  188. <option value="g4f.Provider.Vercel">Vercel</option>
  189. <option value="g4f.Provider.Aichat">Aichat</option>
  190. <option value="g4f.Provider.GPTalk">GPTalk</option>
  191. <option value="g4f.Provider.GptGod">GptGod</option>
  192. <option value="g4f.Provider.AiAsk">AiAsk</option>
  193. <option value="g4f.Provider.GptGo">GptGo</option>
  194. <option value="g4f.Provider.Ylokh">Ylokh</option>
  195. <option value="g4f.Provider.Bard">Bard</option>
  196. <option value="g4f.Provider.Aibn">Aibn</option>
  197. <option value="g4f.Provider.Bing">Bing</option>
  198. <option value="g4f.Provider.You">You</option>
  199. <option value="g4f.Provider.Llama2">Llama2</option>
  200. <option value="g4f.Provider.Aivvm">Aivvm</option>
  201. </select>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <div class="mobile-sidebar">
  208. <i class="fa-solid fa-bars"></i>
  209. </div>
  210. <script>
  211. </script>
  212. </body>
  213. </html>