Hugging Face's logo

Spaces:
TejAndrewsACC
/
Chater
Sleeping

App Files Community
Chater
File size: 4,061 Bytes 
e56c6b3
 
3b986c0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
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()