Add webui

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+indent_size = 2

Dockerfile

@@ -0,0 +1,13 @@
+FROM ghcr.io/ggerganov/llama.cpp:server
+
+RUN apt update && apt install -y curl
+
+RUN mkdir /models
+
+RUN curl -L https://huggingface.co/TheBloke/deepseek-coder-1.3b-instruct-GGUF/resolve/main/deepseek-coder-1.3b-instruct.Q5_K_M.gguf --output /models/deepseek-coder-1.3b-instruct.Q5_K_M.gguf
+
+COPY  ./public /webui
+
+ENTRYPOINT [ "/server" ]
+
+CMD [ "--host", "0.0.0.0", "--port", "7860", "--model", "/models/deepseek-coder-1.3b-instruct.Q5_K_M.gguf", "-c", "4096", "--chat-template", "deepseek", "--path", "/webui" ]

public/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Siyu Long
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

public/README.md

@@ -0,0 +1,16 @@
+# chatgpt-api-frontend
+Frontend of ChatGPT API, with an optional Cloudflare Pages Functions backend to proxy requests and store tokens.
+
+Code from https://github.com/longern/chatgpt-api-frontend
+
+## Features
+- [x] Chat with gpt-3.5-turbo model
+- [x] Stream HTTP responses
+- [x] Markdown support
+- [x] Code highlighting
+- [x] Save chat history
+- [x] Store token in backend or require user to provide it
+
+## Usage
+
+Open `index.html`. That's it!

public/assets/css/style.css

@@ -0,0 +1,135 @@
+* {
+    box-sizing: border-box;
+  }
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+  body {
+    margin: 0;
+    font-family: -apple-system, "system-ui", "Segoe UI Adjusted", "Segoe UI",
+      "Liberation Sans", sans-serif;
+  }
+  pre {
+    overflow-x: auto;
+    border-radius: 6px;
+  }
+  button {
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+    cursor: pointer;
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  #app {
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #333;
+    color: white;
+  }
+  header > button {
+    position: absolute;
+    padding: 12px;
+  }
+  button.menu {
+    left: 0;
+  }
+  button.clear {
+    right: 0;
+  }
+  .hidden {
+    display: none;
+  }
+  aside {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: flex;
+  }
+  .sidebar-container {
+    background-color: #333;
+    color: white;
+    width: 300px;
+    overflow-y: auto;
+  }
+  .sidebar-modal {
+    flex: 1 0;
+    min-width: 64px;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  li > button {
+    width: 100%;
+    height: 48px;
+    text-align: left;
+    padding: 0 16px;
+    transition: background-color 0.2s;
+  }
+  li > button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  main {
+    flex-grow: 1;
+    overflow-y: auto;
+  }
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 768px;
+    margin: 0 auto;
+    overflow-wrap: break-word;
+  }
+  .chat-container .message {
+    padding: 2px 16px;
+  }
+
+  .chat-container code:not(.hljs) {
+    color: #4d4d4d;
+    padding: 0 5px;
+    display: inline-block;
+  }
+
+  .chat-container .assistant {
+    background-color: #f0f0f0;
+  }
+  footer {
+    width: 100%;
+    padding: 8px;
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  #input-box {
+    width: 100%;
+    max-width: 768px;
+    padding: 8px;
+    border-width: 1px;
+    border-color: rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .hljs-code-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 6px;
+    background-color: #9b9b9b;
+    color: #fff;
+  }

public/assets/js/app.js

@@ -0,0 +1,170 @@
+
+const md = window.markdownit({
+  linkify: true,
+  highlight(code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+    const html = hljs.highlight(code, {language: language, ignoreIllegals: true }).value
+    return `<pre class="hljs-code-container my-3"><div class="hljs-code-header"><span>${language}</span><button class="hljs-copy-button">Copy</button></div><code class="hljs language-${language}">${html}</code></pre>`
+  },
+});
+
+new ClipboardJS('.hljs-copy-button', {
+  target: function(trigger) {
+      console.log(trigger.parentNode.nextElementSibling)
+      return trigger.parentNode.nextElementSibling;
+  }
+});
+
+async function getApiUrl() {
+  if (getApiUrl.url) return getApiUrl.url;
+  try {
+    const response = await fetch("/v1/chat/completions", {
+      method: "OPTIONS",
+    });
+    if (response.status !== 200) throw new Error();
+    getApiUrl.url = "/v1/chat/completions";
+    const corsHeaders = (
+      response.headers.get("Access-Control-Allow-Headers") || ""
+    ).toLowerCase();
+    getApiUrl.tokenRequired = corsHeaders.includes("authorization");
+  } catch (e) {
+    getApiUrl.url = "https://api.openai.com/v1/chat/completions";
+    getApiUrl.tokenRequired = true;
+  }
+  return getApiUrl.url;
+}
+
+async function postRequest(url, headers, body) {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: headers,
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) {
+    throw new Error(await response.text());
+  }
+  return response;
+}
+
+async function readStream(stream, progressCallback) {
+  const reader = stream.getReader();
+  const textDecoder = new TextDecoder('utf-8');
+  let responseObj = {};
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+
+    const lines = textDecoder.decode(value).split("\n");
+    processLines(lines, responseObj, progressCallback);
+  }
+
+  return responseObj;
+}
+
+function processLines(lines, responseObj, progressCallback) {
+  for (const line of lines) {
+    if (line.startsWith("data: ")) {
+      if (line.includes("[DONE]")) {
+        return responseObj;
+      }
+      try {
+        const data = JSON.parse(line.slice(6));
+        const delta = data.choices[0].delta;
+
+        Object.keys(delta).forEach(key => {
+          responseObj[key] = (responseObj[key] || "") + delta[key];
+          progressCallback(responseObj);
+        });
+
+      } catch (e) {
+        console.log("Error parsing line:", line);
+      }
+    }
+  }
+}
+
+async function complete(messages, token, progressCallback) {
+  const apiUrl = await getApiUrl();
+  const headers = { "Content-Type": "application/json" };
+  if (getApiUrl.tokenRequired) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  const body = {
+    model: "gpt-3.5-turbo",
+    messages: messages,
+    stream: true,
+  };
+
+  const response = await postRequest(apiUrl, headers, body);
+  return readStream(response.body, progressCallback);
+}
+
+function chatMessage(message) {
+  return {
+    scrollToBottom() {
+      const chatContainer = document.getElementById('chatContainer');
+      const main = chatContainer.parentElement;
+      main.scrollTop = main.scrollHeight;
+    },
+    watchEffect(message)
+    {
+      this.$nextTick(() => {
+        this.$el.innerHTML = md.render(message);
+        this.scrollToBottom()
+      });
+    }
+  }
+}
+
+function chatApp() {
+  return {
+      messages: [],
+      newMessage: '',
+
+      init() {
+        this.messages = [
+          { role: 'system', content: 'You are a programing assistant. Answer using markdown.' }
+        ];
+
+        hljs.configure({
+          'cssSelector' : 'pre code'
+        });
+      },
+
+      sendMessage() {
+          if (this.newMessage.trim() === '') return;
+
+          const userMessage = { role: 'user', content: this.newMessage };
+
+
+          this.messages.push(userMessage);
+          this.messages.push({ role: 'assistant', content: '' });
+          const lastMsgIndex = this.messages.length - 1;
+
+          try {
+            complete(
+              this.messages,
+              'no-token',
+              (message) => {
+                if (message.content)
+                  this.messages[lastMsgIndex].content = message.content;
+              }
+            );
+
+          } catch (error) {
+            console.log(error.message);
+            return;
+          } finally {
+            this.newMessage = '';
+          }
+      },
+
+      clearMessages() {
+        this.messages = [];
+      },
+  };
+}
+
+

public/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="ChatGPT API Demo with Alpine.js">
+    <meta name="viewport" content="width=device-width, height=device-height">
+    <title>OpenAI Chat with Alpine.js</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/dist/cdn.min.js"></script>
+</head>
+<body>
+
+<div x-data="chatApp()" x-init="init()" id="app">
+    <header>
+        <span>OpenAI Chat with Alpine.js</span>
+        <button @click="clearMessages" class="clear"><img
+            src="assets/img/cleaning_services.svg"
+            width="24"
+            height="24"
+            title="Clear chat"
+            alt="Clear"></button>
+    </header>
+
+    <main>
+        <div class="chat-container" id="chatContainer">
+            <template x-for="(message, index) in messages" :key="index">
+                <template x-if="message.role != 'system'">
+                    <div x-data="chatMessage()"
+                         :class="[message.role, 'message'].join(' ')"
+                         x-effect="watchEffect(message.content)"></div>
+                </template>
+            </template>
+        </div>
+    </main>
+
+    <footer>
+        <input id="input-box" type="text"
+              x-model="newMessage"
+              @keyup.enter="sendMessage"
+              placeholder="Type your message here..."
+              aria-label="Chat with AI">
+    </footer>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
+<script src="assets/js/app.js"></script>
+
+</body>
+</html>