Hugging Face's logo

Spaces:
hogiahien
/
llm-chatcraft-pro
Running

App Files Community
hogiahien commited on
Commit
39cb4cf
·
verified ·
1 Parent(s): 89d6e46

write an LLM frontend with options to add an API key, a custom OpenAI-compatible API and chat saving in local browser storage.

Browse files
Files changed (1) hide show
  1. index.html +156 -88
index.html CHANGED
@@ -1,103 +1,171 @@
1
 
2
  <!DOCTYPE html>
3
- <html lang="en">
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>LLM ChatCraft Pro</title>
8
- <script src="https://cdn.tailwindcss.com"></script>
9
  <style>
10
- .message-user { background-color: #e3f2fd; }
11
- .message-assistant { background-color: #f5f5f5; }
12
- .chat-container { height: 400px; overflow-y: auto; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </style>
14
  </head>
15
- <body class="bg-gray-100 min-h-screen">
16
- <div class="container mx-auto px-4 py-8">
17
- <h1 class="text-3xl font-bold text-center mb-8">LLM ChatCraft Pro 🚀</h1>
18
 
19
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
20
- <!-- Settings Panel -->
21
- <div class="bg-white rounded-lg shadow-md p-6">
22
- <h2 class="text-xl font-semibold mb-4">Settings</h2>
23
-
24
- <div class="space-y-4">
25
- <!-- API Key Input -->
26
- <div>
27
- <label class="block text-sm font-medium mb-2">API Key</label>
28
- <input type="password" id="apiKey" placeholder="Enter your API key"
29
- class="w-full p-2 border border-gray-300 rounded">
30
- </div>
31
-
32
- <!-- Custom API Endpoint -->
33
- <div>
34
- <label class="block text-sm font-medium mb-2">Custom API Endpoint (Optional)</label>
35
- <input type="text" id="apiEndpoint" placeholder="https://api.openai.com/v1"
36
- class="w-full p-2 border border-gray-300 rounded">
37
- </div>
38
-
39
- <!-- Model Selection -->
40
- <div>
41
- <label class="block text-sm font-medium mb-2">Model</label>
42
- <select id="model" class="w-full p-2 border border-gray-300 rounded">
43
- <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
44
- <option value="gpt-4">gpt-4</option>
45
- <option value="custom">Custom Model</option>
46
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  </div>
48
-
49
- <!-- Custom Model Name -->
50
- <div id="customModelContainer" class="hidden">
51
- <label class="block text-sm font-medium mb-2">Custom Model Name</label>
52
- <input type="text" id="customModel" placeholder="Enter custom model name"
53
- class="w-full p-2 border border-gray-300 rounded">
54
- </div>
55
-
56
- <!-- Save Settings Button -->
57
- <button onclick="saveSettings()" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600">
58
- Save Settings
59
- </button>
60
-
61
- <!-- Chat Management -->
62
- <div class="border-t pt-4">
63
- <h3 class="font-semibold mb-2">Chat Management</h3>
64
- <div class="space-y-2">
65
- <input type="text" id="chatName" placeholder="Enter chat name"
66
- class="w-full p-2 border border-gray-300 rounded">
67
- <button onclick="saveChat()" class="w-full bg-green-500 text-white p-2 rounded hover:bg-green-600">
68
- Save Current Chat
69
- </button>
70
- <button onclick="loadChatList()" class="w-full bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600">
71
- Load Saved Chat
72
- </button>
73
- <div id="chatList" class="space-y-1"></div>
74
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  </div>
76
- </div>
77
- </div>
78
-
79
- <!-- Chat Interface -->
80
- <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6">
81
- <div class="chat-container mb-4 border border-gray-300 rounded p-4" id="chatMessages">
82
- <!-- Chat messages will appear here -->
83
- </div>
84
-
85
- <div class="flex space-x-2">
86
- <input type="text" id="userInput" placeholder="Type your message..."
87
- class="flex-1 p-2 border border-gray-300 rounded"
88
- onkeypress="if(event.key === 'Enter') sendMessage()">
89
- <button onclick="sendMessage()" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">
90
- Send
91
- </button>
92
- <button onclick="clearChat()" class="bg-red-500 text-white p-2 rounded hover:bg-red-600">
93
- Clear
94
- </button>
95
- </div>
96
- </div>
97
- </div>
98
  </div>
99
-
100
- <script>
101
  // Storage keys
102
  const STORAGE_KEYS = {
103
  SETTINGS: 'llm_chatcraft_settings',
 
1
 
2
  <!DOCTYPE html>
3
+ <html>
4
  <head>
 
 
5
  <title>LLM ChatCraft Pro</title>
 
6
  <style>
7
+ body {
8
+ font-family: Arial, sans-serif;
9
+ margin: 0;
10
+ padding: 20px;
11
+ background-color: #f0f0f0;
12
+ }
13
+ .container {
14
+ width: 95%;
15
+ margin: 0 auto;
16
+ background-color: white;
17
+ border: 1px solid #ccc;
18
+ padding: 20px;
19
+ }
20
+ h1 {
21
+ color: #000080;
22
+ text-align: center;
23
+ font-size: 24px;
24
+ }
25
+ table {
26
+ width: 100%;
27
+ border-collapse: collapse;
28
+ }
29
+ td {
30
+ vertical-align: top;
31
+ padding: 10px;
32
+ }
33
+ .panel {
34
+ border: 1px solid #ccc;
35
+ padding: 15px;
36
+ margin-bottom: 10px;
37
+ background-color: #f8f8f8;
38
+ }
39
+ input, select, textarea {
40
+ border: 1px solid #666;
41
+ padding: 4px;
42
+ font-family: Arial, sans-serif;
43
+ }
44
+ button {
45
+ background-color: #e0e0e0;
46
+ border: 1px solid #666;
47
+ padding: 4px 8px;
48
+ cursor: pointer;
49
+ }
50
+ button:hover {
51
+ background-color: #d0d0d0;
52
+ }
53
+ .message-user {
54
+ background-color: #e0e8ff;
55
+ margin: 5px 0;
56
+ padding: 8px;
57
+ border: 1px solid #a0a0a0;
58
+ }
59
+ .message-assistant {
60
+ background-color: #f0f0f0;
61
+ margin: 5px 0;
62
+ padding: 8px;
63
+ border: 1px solid #a0a0a0;
64
+ }
65
+ .chat-container {
66
+ height: 300px;
67
+ overflow-y: auto;
68
+ border: 1px solid #666;
69
+ padding: 10px;
70
+ background-color: white;
71
+ }
72
  </style>
73
  </head>
74
+ <body>
75
+ <div class="container">
76
+ <h1>LLM ChatCraft Pro</h1>
77
 
78
+ <table>
79
+ <tr>
80
+ <td width="30%">
81
+ <div class="panel">
82
+ <h2>Settings</h2>
83
+
84
+ <table width="100%">
85
+ <tr>
86
+ <td><b>API Key:</b></td>
87
+ </tr>
88
+ <tr>
89
+ <td><input type="password" id="apiKey" placeholder="Enter your API key" style="width: 95%"></td>
90
+ </tr>
91
+ <tr>
92
+ <td><b>API Endpoint:</b></td>
93
+ </tr>
94
+ <tr>
95
+ <td><input type="text" id="apiEndpoint" placeholder="https://api.openai.com/v1" style="width: 95%"></td>
96
+ </tr>
97
+ <tr>
98
+ <td><b>Model:</b></td>
99
+ </tr>
100
+ <tr>
101
+ <td>
102
+ <select id="model" style="width: 95%">
103
+ <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
104
+ <option value="gpt-4">gpt-4</option>
105
+ <option value="custom">Custom Model</option>
106
+ </select>
107
+ </td>
108
+ </tr>
109
+ <tr id="customModelContainer" style="display: none">
110
+ <td><b>Custom Model:</b></td>
111
+ </tr>
112
+ <tr id="customModelContainer" style="display: none">
113
+ <td><input type="text" id="customModel" placeholder="Enter custom model name" style="width: 95%"></td>
114
+ </tr>
115
+ <tr>
116
+ <td><button onclick="saveSettings()" style="width: 95%">Save Settings</button></td>
117
+ </tr>
118
+ </table>
119
+
120
+ <hr style="border: 1px solid #ccc; margin: 15px 0;">
121
+
122
+ <h3>Chat Management</h3>
123
+ <table width="100%">
124
+ <tr>
125
+ <td><b>Chat Name:</b></td>
126
+ </tr>
127
+ <tr>
128
+ <td><input type="text" id="chatName" placeholder="Enter chat name" style="width: 95%"></td>
129
+ </tr>
130
+ <tr>
131
+ <td><button onclick="saveChat()" style="width: 95%">Save Current Chat</button></td>
132
+ </tr>
133
+ <tr>
134
+ <td><button onclick="loadChatList()" style="width: 95%">Load Saved Chat</button></td>
135
+ </tr>
136
+ <tr>
137
+ <td><div id="chatList"></div></td>
138
+ </tr>
139
+ </table>
140
  </div>
141
+ </td>
142
+
143
+ <td width="70%">
144
+ <div class="panel">
145
+ <h2>Chat Interface</h2>
146
+
147
+ <div class="chat-container" id="chatMessages">
148
+ <!-- Chat messages will appear here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  </div>
150
+
151
+ <br>
152
+
153
+ <table width="100%">
154
+ <tr>
155
+ <td width="80%"><input type="text" id="userInput" placeholder="Type your message..." style="width: 95%" onkeypress="if(event.key === 'Enter') sendMessage()"></td>
156
+ <td width="20%">
157
+ <button onclick="sendMessage()" style="width: 95%">Send</button>
158
+ <br><br>
159
+ <button onclick="clearChat()" style="width: 95%">Clear</button>
160
+ </td>
161
+ </tr>
162
+ </table>
163
  </div>
164
+ </td>
165
+ </tr>
166
+ </table>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
+ <script>
 
169
  // Storage keys
170
  const STORAGE_KEYS = {
171
  SETTINGS: 'llm_chatcraft_settings',