Hugging Face's logo

Spaces:
hhelesto
/
flask-comment-generator
Sleeping

App Files Community
hhelesto commited on
Commit
d6e4f49
·
verified ·
1 Parent(s): 501f078

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +79 -35
templates/index.html CHANGED
@@ -1,37 +1,81 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>AI Comment Generator</title>
6
- <style>
7
- body {
8
- font-family: sans-serif;
9
- max-width: 600px;
10
- margin: 50px auto;
11
- background: #f7f7f7;
12
- padding: 20px;
13
- border-radius: 8px;
14
- }
15
- textarea {
16
- width: 100%;
17
- height: 150px;
18
- padding: 10px;
19
- font-size: 16px;
20
- }
21
- button {
22
- padding: 10px 20px;
23
- font-size: 16px;
24
- cursor: pointer;
25
- margin-top: 10px;
26
- }
27
- </style>
28
- </head>
29
- <body>
30
- <h1>AI Comment Generator</h1>
31
- <form action="/generate" method="post">
32
- <label for="prompt">Enter your prompt:</label><br>
33
- <textarea id="prompt" name="prompt" required></textarea><br>
34
- <button type="submit">Generate</button>
35
- </form>
36
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>AI Comment Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ font-family: "Inter", sans-serif;
11
+ }
12
+ </style>
13
+ </head>
14
+ <body class="bg-gray-950 text-gray-50 min-h-screen flex items-center justify-center p-4">
15
+ <div class="w-full max-w-xl bg-gray-900 rounded-xl p-8 shadow-2xl border border-gray-800">
16
+ <h1 class="text-3xl font-bold mb-6 text-center text-gradient">
17
+ AI Comment Generator
18
+ </h1>
19
+
20
+ <form id="promptForm" class="space-y-4">
21
+ <textarea
22
+ id="prompt"
23
+ name="prompt"
24
+ class="w-full p-4 rounded-md bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600 text-gray-100 placeholder-gray-400"
25
+ placeholder="Enter your prompt..."
26
+ rows="5"
27
+ ></textarea>
28
+
29
+ <button
30
+ type="submit"
31
+ class="w-full py-3 bg-blue-600 hover:bg-blue-500 rounded-md font-semibold text-white transition-colors"
32
+ >
33
+ Generate
34
+ </button>
35
+ </form>
36
+
37
+ <div
38
+ id="result"
39
+ class="mt-6 p-4 rounded-md bg-gray-800 border border-gray-700 text-gray-100 min-h-[100px] whitespace-pre-wrap"
40
+ ></div>
41
+ </div>
42
+
43
+ <script>
44
+ const form = document.getElementById('promptForm');
45
+ const resultDiv = document.getElementById('result');
46
+
47
+ form.addEventListener('submit', async (e) => {
48
+ e.preventDefault();
49
+
50
+ resultDiv.textContent = 'Generating...';
51
+
52
+ const prompt = document.getElementById('prompt').value;
53
+
54
+ const res = await fetch('/generate', {
55
+ method: 'POST',
56
+ headers: {
57
+ 'Content-Type': 'application/json'
58
+ },
59
+ body: JSON.stringify({ prompt })
60
+ });
61
+
62
+ if (!res.body) {
63
+ resultDiv.textContent = 'No streaming supported.';
64
+ return;
65
+ }
66
+
67
+ const reader = res.body.getReader();
68
+ const decoder = new TextDecoder();
69
+
70
+ resultDiv.textContent = '';
71
+
72
+ while (true) {
73
+ const { done, value } = await reader.read();
74
+ if (done) break;
75
+ const chunk = decoder.decode(value, { stream: true });
76
+ resultDiv.textContent += chunk;
77
+ }
78
+ });
79
+ </script>
80
+ </body>
81
  </html>