Hugging Face's logo

Spaces:
Athspi
/
Aigg
Sleeping

App Files Community
Athspi commited on
Commit
6c76ab5
·
verified ·
1 Parent(s): b3991dc

Update templates/chat.html

Browse files
Files changed (1) hide show
  1. templates/chat.html +147 -50
templates/chat.html CHANGED
@@ -1,48 +1,141 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>AI Project Chat</title>
5
  <style>
6
  body {
7
- font-family: Arial, sans-serif;
 
 
 
 
 
 
 
 
 
 
8
  padding: 20px;
9
- background-color: #fafafa;
 
10
  }
11
- h1 {
12
- color: #333;
 
 
 
 
13
  }
14
- ul {
 
15
  list-style-type: none;
16
  padding: 0;
 
17
  }
18
- li {
19
- background: #e7e7e7;
20
  margin: 5px 0;
21
  padding: 8px;
 
22
  border-radius: 4px;
 
 
23
  }
24
- textarea {
25
- width: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  padding: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  font-size: 14px;
28
- margin-top: 10px;
 
 
29
  }
30
- input[type="submit"] {
31
- padding: 10px 20px;
32
- background-color: #2196F3;
 
33
  color: white;
34
  border: none;
 
 
35
  cursor: pointer;
36
- margin-top: 10px;
37
  }
38
- input[type="submit"]:hover {
39
- background-color: #0b7dda;
 
40
  }
41
- pre {
42
- background: #f1f1f1;
43
- padding: 10px;
44
- border-radius: 4px;
45
- overflow-x: auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  }
47
  </style>
48
  <script>
@@ -52,35 +145,39 @@
52
  </script>
53
  </head>
54
  <body>
55
- <h1>AI Project Chat</h1>
56
-
57
- <h3>Project Files:</h3>
58
- <ul>
59
- {% for file in project_tree %}
60
- <li>{{ file }}</li>
61
- {% endfor %}
62
- </ul>
63
-
64
- <h3>Chat:</h3>
65
- <div style="border:1px solid #ccc; padding:10px;">
66
- {% for chat in chat_history %}
67
- <b>User:</b> {{ chat.user }}<br>
68
- <b>AI:</b> <pre>{{ chat.ai }}</pre><br>
69
- <hr>
70
- {% endfor %}
71
  </div>
72
-
73
- <h3>Send new instruction:</h3>
74
- <form method="POST" onsubmit="showLoading()">
75
- <textarea name="user_message" rows="4" placeholder="Example: Refactor app.py"></textarea><br>
76
- <input type="submit" value="Send to AI">
77
- </form>
78
-
79
- <div id="loading" style="display:none; margin-top:20px;">
80
- <p>Loading... Please wait while AI is generating response.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  </div>
82
-
83
- <br>
84
- <a href="/download_project">Download full project ZIP</a>
85
  </body>
86
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>AI Project Chat - Modern</title>
5
  <style>
6
  body {
7
+ margin: 0;
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ background-color: #f0f2f5;
10
+ display: flex;
11
+ height: 100vh;
12
+ }
13
+
14
+ .sidebar {
15
+ width: 250px;
16
+ background-color: #2c3e50;
17
+ color: white;
18
  padding: 20px;
19
+ box-shadow: 2px 0 5px rgba(0,0,0,0.1);
20
+ overflow-y: auto;
21
  }
22
+
23
+ .sidebar h2 {
24
+ font-size: 18px;
25
+ margin-bottom: 10px;
26
+ border-bottom: 1px solid #444;
27
+ padding-bottom: 5px;
28
  }
29
+
30
+ .sidebar ul {
31
  list-style-type: none;
32
  padding: 0;
33
+ margin: 0;
34
  }
35
+
36
+ .sidebar li {
37
  margin: 5px 0;
38
  padding: 8px;
39
+ background-color: #34495e;
40
  border-radius: 4px;
41
+ cursor: pointer;
42
+ transition: background-color 0.2s;
43
  }
44
+
45
+ .sidebar li:hover {
46
+ background-color: #3d566e;
47
+ }
48
+
49
+ .main {
50
+ flex-grow: 1;
51
+ display: flex;
52
+ flex-direction: column;
53
+ padding: 20px;
54
+ }
55
+
56
+ .chat-box {
57
+ flex-grow: 1;
58
+ background-color: white;
59
+ padding: 20px;
60
+ border-radius: 8px;
61
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
62
+ overflow-y: auto;
63
+ margin-bottom: 20px;
64
+ }
65
+
66
+ .chat-entry {
67
+ margin-bottom: 15px;
68
+ }
69
+
70
+ .chat-entry b {
71
+ color: #333;
72
+ }
73
+
74
+ .chat-entry pre {
75
+ background-color: #f7f7f7;
76
  padding: 10px;
77
+ border-radius: 4px;
78
+ overflow-x: auto;
79
+ }
80
+
81
+ .input-box {
82
+ display: flex;
83
+ flex-direction: column;
84
+ }
85
+
86
+ .input-box textarea {
87
+ width: 100%;
88
+ padding: 12px;
89
+ border-radius: 4px;
90
+ border: 1px solid #ccc;
91
  font-size: 14px;
92
+ resize: vertical;
93
+ min-height: 80px;
94
+ margin-bottom: 10px;
95
  }
96
+
97
+ .input-box input[type="submit"] {
98
+ padding: 12px;
99
+ background-color: #3498db;
100
  color: white;
101
  border: none;
102
+ border-radius: 4px;
103
+ font-size: 16px;
104
  cursor: pointer;
105
+ transition: background-color 0.2s;
106
  }
107
+
108
+ .input-box input[type="submit"]:hover {
109
+ background-color: #2980b9;
110
  }
111
+
112
+ .top-bar {
113
+ display: flex;
114
+ justify-content: space-between;
115
+ align-items: center;
116
+ margin-bottom: 20px;
117
+ }
118
+
119
+ .top-bar h1 {
120
+ font-size: 24px;
121
+ color: #333;
122
+ }
123
+
124
+ .top-bar a {
125
+ text-decoration: none;
126
+ color: #3498db;
127
+ font-weight: bold;
128
+ transition: color 0.2s;
129
+ }
130
+
131
+ .top-bar a:hover {
132
+ color: #2980b9;
133
+ }
134
+
135
+ #loading {
136
+ margin-top: 10px;
137
+ font-style: italic;
138
+ color: #555;
139
  }
140
  </style>
141
  <script>
 
145
  </script>
146
  </head>
147
  <body>
148
+ <div class="sidebar">
149
+ <h2>📂 Project Files</h2>
150
+ <ul>
151
+ {% for file in project_tree %}
152
+ <li>{{ file }}</li>
153
+ {% endfor %}
154
+ </ul>
 
 
 
 
 
 
 
 
 
155
  </div>
156
+
157
+ <div class="main">
158
+ <div class="top-bar">
159
+ <h1>🤖 AI Project Chat</h1>
160
+ <a href="/download_project">⬇️ Download Project ZIP</a>
161
+ </div>
162
+
163
+ <div class="chat-box">
164
+ {% for chat in chat_history %}
165
+ <div class="chat-entry">
166
+ <b>User:</b> {{ chat.user }}<br>
167
+ <b>AI:</b>
168
+ <pre>{{ chat.ai }}</pre>
169
+ </div>
170
+ {% endfor %}
171
+ </div>
172
+
173
+ <form method="POST" onsubmit="showLoading()" class="input-box">
174
+ <textarea name="user_message" placeholder="Example: Refactor app.py or Create new file called utils.py"></textarea>
175
+ <input type="submit" value="Send to AI">
176
+ </form>
177
+
178
+ <div id="loading" style="display:none;">
179
+ Loading... Please wait while AI is generating response.
180
+ </div>
181
  </div>
 
 
 
182
  </body>
183
  </html>