xcv

Sleeping

App Files Files Community

Gargaz commited on Nov 16, 2024

Commit

78fe226

verified ·

1 Parent(s): 468dc44

Update app.py

Browse files

Files changed (1) hide show

app.py +245 -61

app.py CHANGED Viewed

@@ -1,64 +1,248 @@
-import gradio as gr
-from huggingface_hub import InferenceClient
-"""
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
-"""
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
-    messages.append({"role": "user", "content": message})
-    response = ""
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
-        response += token
-        yield response
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
 )
-if __name__ == "__main__":
-    demo.launch()

+from flask import Flask, request, Response, render_template
+from huggingface_hub import hf_hub_download
+from llama_cpp import Llama
+app = Flask(__name__)
+# HTML content as a string
+HTML_CONTENT = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
+  <title>AI Chat Interface</title>
+  <style>
+    *{
+      padding: 0;
+      margin: 0;
+      font-family: 'Poppins', sans-serif;
+      box-sizing: border-box;
+    }
+    body {
+  overflow: hidden;
+}
+/* Hide scrollbar only for Webkit browsers (Chrome, Safari, Opera) */
+::-webkit-scrollbar {
+  display: none;
+}
+    body{
+      width: 100%;
+      height: 100vh;
+      background-color: #212121;
+    }
+    .chat{
+      display: flex;
+      gap: 20px;
+      padding: 25px;
+      color: #fff;
+      font-size: 15px;
+      font-weight: 300;
+    }
+    .chat img{
+      width: 35px;
+      height: 35px;
+      border-radius: 50px;
+    }
+    .response{
+      background-color: #212121;
+    }
+    .messagebar{
+      position: fixed;
+      bottom: 0;
+      height: 5rem;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #212121;
+    }
+    .messagebar .bar-wrapper{
+      background-color: #2f2f2f;
+      border-radius: 20px;
+      width: 70vw;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .bar-wrapper input{
+      width: 100%;
+      padding: 5px;
+      border: none;
+      outline: none;
+      font-size: 14px;
+      background: none;
+      color: #ccc;
+    }
+    .bar-wrapper input::placeholder{
+      color: #ccc;
+    }
+    .messagebar button{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      color: #fff;
+      cursor: pointer;
+    }
+    .message-box{
+      height: calc(100vh - 5rem);
+      overflow-y: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="chatbox-wrapper">
+    <div class="message-box" id="chat-container">
+      <div class="chat response">
+         <img src="https://freelogopng.com/images/all_img/1681038800chatgpt-logo-black.png" alt="AI">
+        <span>Hello there! <br>
+          How can I help you today.
+        </span>
+      </div>
+    </div>
+    <div class="messagebar">
+      <div class="bar-wrapper">
+        <input type="text" id="user-input" placeholder="Enter your message...">
+        <button onclick="sendMessage()">
+          <span class="material-symbols-rounded">
+            send
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <script>
+    const messageBar = document.querySelector("#user-input");
+    const sendBtn = document.querySelector(".bar-wrapper button");
+    const messageBox = document.querySelector("#chat-container");
+    function addMessage(message, isUser) {
+      const messageElement = document.createElement('div');
+      messageElement.classList.add('chat');
+      if (!isUser) messageElement.classList.add('response');
+      const imgElement = document.createElement('img');
+       imgElement.src = isUser ? "https://wallpaperaccess.com/full/1595920.jpg" : "https://freelogopng.com/images/all_img/1681038800chatgpt-logo-black.png";
+      imgElement.alt = isUser ? "User" : "AI";
+      const spanElement = document.createElement('span');
+      spanElement.textContent = message;
+      messageElement.appendChild(imgElement);
+      messageElement.appendChild(spanElement);
+      messageBox.appendChild(messageElement);
+      messageBox.scrollTop = messageBox.scrollHeight;
+    }
+    function sendMessage() {
+      const message = messageBar.value.trim();
+      if (message) {
+        addMessage(message, true);
+        messageBar.value = '';
+        const eventSource = new EventSource(`/chat?message=${encodeURIComponent(message)}`);
+        let aiResponse = '';
+        eventSource.onmessage = function(event) {
+          if (event.data === '[DONE]') {
+            eventSource.close();
+          } else {
+            aiResponse += event.data;
+            const aiMessageElement = document.querySelector('.chat.response:last-child span');
+            if (aiMessageElement) {
+              aiMessageElement.textContent = aiResponse;
+            } else {
+              addMessage(aiResponse, false);
+            }
+          }
+        };
+        eventSource.onerror = function(error) {
+          console.error('EventSource failed:', error);
+          eventSource.close();
+        };
+      }
+    }
+    messageBar.addEventListener('keypress', function(event) {
+      if (event.key === 'Enter') {
+        sendMessage();
+      }
+    });
+  </script>
+</body>
+</html>
+'''
+def download_model():
+    model_name = "lmstudio-community/gemma-2-2b-it-GGUF"
+    model_file = "gemma-2-2b-it-Q6_K.gguf"
+    return hf_hub_download(model_name, filename=model_file)
+def initialize_model(model_path):
+    return Llama(
+        model_path=model_path,
+        n_ctx=4096,
+        n_threads=4,
+        n_gpu_layers=-1  # Use GPU if available
+    )
+model_path = download_model()
+llm = initialize_model(model_path)
+system_prompt = (
+    "You are a normal AI assistant. Your mission is to help people and respond clearly and friendly."
 )
+chat_history = [{"role": "system", "content": system_prompt}]
+@app.route('/')
+def index():
+    return HTML_CONTENT
+@app.route('/chat')
+def chat():
+    global chat_history
+    user_message = request.args.get('message', '')
+    chat_history.append({"role": "user", "content": user_message})
+    full_prompt = "\n".join([f"{msg['role']}: {msg['content']}" for msg in chat_history])
+    full_prompt += "\nAssistant:"
+    def generate():
+        ai_response = ""
+        for token in llm(full_prompt, max_tokens=1000, stop=["User:"], stream=True):
+            chunk = token['choices'][0]['text']
+            if chunk:
+                ai_response += chunk
+                yield f"data: {chunk}\n\n"
+        chat_history.append({"role": "assistant", "content": ai_response.strip()})
+        if len(chat_history) > 10:  # Limit history to last 10 messages
+            chat_history = chat_history[-10:]
+        yield "data: [DONE]\n\n"
+    return Response(generate(), content_type='text/event-stream')
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)