Spaces:

TejAndrewsACC
/

Chater

Running

App Files Files Community

TejAndrewsACC commited on 5 days ago

Commit

3b986c0

•

1 Parent(s): 78113c8

Update app.py

Browse files

Files changed (1) hide show

app.py +140 -16

app.py CHANGED Viewed

@@ -1,18 +1,142 @@
 import gradio as gr
-# Function to serve the HTML content
-def display_html():
-    with open("index.html", "r") as file:
-        html_content = file.read()
-    return html_content
-# Gradio interface with custom HTML rendering
-interface = gr.Interface(
-    fn=display_html,
-    inputs=None,
-    outputs=gr.HTML()
-)
-# Launch the Gradio app
-if __name__ == "__main__":
-    interface.launch()

 import gradio as gr
+html_code = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot with GPT Model</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+        #chatbox {
+            width: 400px;
+            height: 500px;
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+        }
+        #chatlogs {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            border-bottom: 1px solid #ddd;
+        }
+        .chat-message {
+            margin: 10px 0;
+        }
+        .user {
+            text-align: right;
+        }
+        .bot {
+            text-align: left;
+        }
+        .message {
+            max-width: 70%;
+            padding: 10px;
+            border-radius: 5px;
+            display: inline-block;
+        }
+        .user .message {
+            background-color: #dcf8c6;
+        }
+        .bot .message {
+            background-color: #f1f0f0;
+        }
+        #userInput {
+            display: flex;
+            padding: 10px;
+        }
+        #userInput input {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-right: 10px;
+        }
+        #userInput button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+        }
+        #userInput button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <div id="chatbox">
+        <div id="chatlogs"></div>
+        <div id="userInput">
+            <input type="text" id="userMessage" placeholder="Type a message...">
+            <button onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+    <script>
+        const API_TOKEN = 'YOUR_HUGGING_FACE_API_TOKEN';
+        const MODEL_URL = 'https://api-inference.huggingface.co/models/meta-llama/Llama-3.3-70B-Instruct';
+        function sendMessage() {
+            const userInput = document.getElementById('userMessage').value;
+            if (userInput.trim() === '') return;
+            appendMessage(userInput, 'user');
+            // Get bot response from GPT model
+            getBotResponse(userInput).then(botResponse => {
+                appendMessage(botResponse, 'bot');
+            });
+            document.getElementById('userMessage').value = '';
+        }
+        function appendMessage(message, sender) {
+            const chatlogs = document.getElementById('chatlogs');
+            const messageElement = document.createElement('div');
+            messageElement.className = `chat-message ${sender}`;
+            messageElement.innerHTML = `<div class="message">${message}</div>`;
+            chatlogs.appendChild(messageElement);
+            chatlogs.scrollTop = chatlogs.scrollHeight;
+        }
+        async function getBotResponse(userInput) {
+            const response = await fetch(MODEL_URL, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${API_TOKEN}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    inputs: userInput,
+                    parameters: {
+                        max_length: 50
+                    }
+                })
+            });
+            const data = await response.json();
+            return data[0].generated_text.trim();
+        }
+    </script>
+</body>
+</html>
+"""
+def app():
+    return html_code
+gr.Interface(fn=app, inputs=[], outputs="html", live=True).launch()