Hugging Face's logo

Spaces:
jorgencio
/
proandosi
Sleeping

App Files Community
jorgencio commited on
Commit
b0a27ea
·
1 Parent(s): 95c5b4a

cambiando html

Browse files
Files changed (2) hide show
  1. __pycache__/app.cpython-310.pyc +0 -0
  2. templates/chat.html +139 -25
__pycache__/app.cpython-310.pyc ADDED
Binary file (2.39 kB). View file
 
templates/chat.html CHANGED
@@ -1,27 +1,141 @@
1
- <div class="chat-bubbles">
2
- {% for message in messages %}
3
- <div class="message {{ message.type }}">
4
- <img src="/static/{{ message.image }}" alt="Profile">
5
- <div class="chat-bubble">
6
- {{ message.text }}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </div>
8
- </div>
9
- {% endfor %}
10
- </div>
11
- <form id="chat-form" method="POST">
12
- <input type="text" id="user-input" name="user_input" placeholder="Type your message..." required>
13
- <button type="submit">Send</button>
14
- </form>
15
- <script>
16
- document.getElementById("chat-form").addEventListener("submit", async function(e) {
17
- e.preventDefault();
18
- const userInput = document.getElementById("user-input").value;
19
- const response = await fetch(`/personajes/{{ character_name }}/chat`, {
20
- method: "POST",
21
- headers: { "Content-Type": "application/json" },
22
- body: JSON.stringify({ user_input: userInput })
 
 
23
  });
24
- const data = await response.json();
25
- console.log(data.response);
26
- });
27
- </script>
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <style>
5
+ * {
6
+ margin: 0;
7
+ padding: 0;
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ body {
12
+ font-family: 'Arial', sans-serif;
13
+ background-color: #f4f7fa;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ justify-content: center;
18
+ min-height: 100vh;
19
+ padding: 20px;
20
+ }
21
+
22
+ .chat-bubbles {
23
+ width: 100%;
24
+ max-width: 600px;
25
+ background-color: #ffffff;
26
+ border-radius: 10px;
27
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28
+ padding: 20px;
29
+ margin-bottom: 20px;
30
+ overflow-y: auto;
31
+ max-height: 70vh;
32
+ }
33
+
34
+ .message {
35
+ display: flex;
36
+ align-items: flex-start;
37
+ margin-bottom: 15px;
38
+ }
39
+
40
+ .message img {
41
+ width: 40px;
42
+ height: 40px;
43
+ border-radius: 50%;
44
+ margin-right: 10px;
45
+ }
46
+
47
+ .chat-bubble {
48
+ background-color: #f0f1f6;
49
+ padding: 10px 15px;
50
+ border-radius: 15px;
51
+ max-width: 80%;
52
+ font-size: 14px;
53
+ color: #333;
54
+ }
55
+
56
+ .message.user .chat-bubble {
57
+ background-color: #a2cffe;
58
+ margin-left: auto;
59
+ }
60
+
61
+ .message.character .chat-bubble {
62
+ background-color: #e8e8e8;
63
+ }
64
+
65
+ #chat-form {
66
+ display: flex;
67
+ justify-content: space-between;
68
+ width: 100%;
69
+ max-width: 600px;
70
+ }
71
+
72
+ #chat-form input {
73
+ width: 85%;
74
+ padding: 10px;
75
+ font-size: 14px;
76
+ border: 1px solid #ccc;
77
+ border-radius: 20px;
78
+ margin-right: 10px;
79
+ }
80
+
81
+ #chat-form button {
82
+ width: 10%;
83
+ padding: 10px;
84
+ background-color: #4CAF50;
85
+ color: white;
86
+ border: none;
87
+ border-radius: 20px;
88
+ cursor: pointer;
89
+ }
90
+
91
+ #chat-form button:hover {
92
+ background-color: #45a049;
93
+ }
94
+
95
+ @media screen and (max-width: 600px) {
96
+ #chat-form input {
97
+ width: 75%;
98
+ }
99
+
100
+ #chat-form button {
101
+ width: 20%;
102
+ }
103
+ }
104
+
105
+ </style>
106
+ <meta charset="UTF-8">
107
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
108
+ <title>Document</title>
109
+ </head>
110
+ <body>
111
+ <div class="chat-bubbles">
112
+ {% for message in messages %}
113
+ <div class="message {{ message.type }}">
114
+ <img src="/static/{{ message.image }}" alt="Profile">
115
+ <div class="chat-bubble">
116
+ {{ message.text }}
117
+ </div>
118
  </div>
119
+ {% endfor %}
120
+ </div>
121
+ <form id="chat-form" method="POST">
122
+ <input type="text" id="user-input" name="user_input" placeholder="Type your message..." required>
123
+ <button type="submit">Send</button>
124
+ </form>
125
+ <script>
126
+ document.getElementById("chat-form").addEventListener("submit", async function(e) {
127
+ e.preventDefault();
128
+ const userInput = document.getElementById("user-input").value;
129
+ const response = await fetch(`/personajes/{{ character_name }}/chat`, {
130
+ method: "POST",
131
+ headers: { "Content-Type": "application/json" },
132
+ body: JSON.stringify({ user_input: userInput })
133
+ });
134
+ const data = await response.json();
135
+ console.log(data.response);
136
  });
137
+ </script>
138
+
139
+ </body>
140
+ </html>
141
+