Hugging Face's logo

Spaces:
sango07
/
Chat_with_multiple_PDF
Sleeping

App Files Community
sango07 commited on
Commit
8c7b46a
·
verified ·
1 Parent(s): 3fc3450

Update htmlTemplate.py

Browse files
Files changed (1) hide show
  1. htmlTemplate.py +74 -21
htmlTemplate.py CHANGED
@@ -1,24 +1,40 @@
1
  css = '''
2
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  .chat-message {
4
- padding: 1rem;
5
- border-radius: 10px;
6
- margin-bottom: 1rem;
7
  display: flex;
8
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
9
- transition: 0.3s;
 
 
 
 
 
 
 
 
10
  }
11
 
12
  .chat-message.user {
13
- background-color: #4a69bd;
14
  color: white;
15
- align-items: center;
16
  }
17
 
18
  .chat-message.bot {
19
- background-color: #78e08f;
20
- color: black;
21
- align-items: center;
22
  }
23
 
24
  .chat-message .avatar {
@@ -26,42 +42,79 @@ css = '''
26
  display: flex;
27
  align-items: center;
28
  justify-content: center;
 
 
29
  }
30
 
31
  .chat-message .avatar img {
32
- max-width: 50px;
33
- max-height: 50px;
34
  border-radius: 50%;
35
  object-fit: cover;
 
36
  }
37
 
38
  .chat-message .message {
39
  width: 85%;
40
- padding: 0 1rem;
41
  font-size: 1rem;
42
- font-family: 'Arial', sans-serif;
43
  }
44
 
45
- .chat-message:hover {
46
- box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  }
48
  </style>
49
  '''
50
 
51
  bot_template = '''
52
- <div class="chat-message bot"">
53
  <div class="avatar">
54
- <img src="https://uxwing.com/wp-content/themes/uxwing/download/communication-chat-call/answer-icon.png" style="max-height: 78px; max-width: 78px; border-radius: 50%; object-fit: cover;">
55
  </div>
56
  <div class="message">{{MSG}}</div>
57
  </div>
58
  '''
59
 
60
  user_template = '''
61
- <div class="chat-message user" style="text-align: left;">
62
  <div class="avatar">
63
- <img src="https://cdn.iconscout.com/icon/free/png-512/free-q-characters-character-alphabet-letter-36051.png?f=webp&w=512">
64
  </div>
65
  <div class="message">{{MSG}}</div>
66
  </div>
67
- '''
 
1
  css = '''
2
  <style>
3
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
4
+
5
+ body {
6
+ background-color: #f4f6f9;
7
+ font-family: 'Inter', sans-serif;
8
+ }
9
+
10
+ .chat-container {
11
+ max-width: 800px;
12
+ margin: 0 auto;
13
+ padding: 20px;
14
+ }
15
+
16
  .chat-message {
 
 
 
17
  display: flex;
18
+ margin-bottom: 1.5rem;
19
+ border-radius: 12px;
20
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
21
+ overflow: hidden;
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .chat-message:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
28
  }
29
 
30
  .chat-message.user {
31
+ background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
32
  color: white;
 
33
  }
34
 
35
  .chat-message.bot {
36
+ background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
37
+ color: white;
 
38
  }
39
 
40
  .chat-message .avatar {
 
42
  display: flex;
43
  align-items: center;
44
  justify-content: center;
45
+ padding: 10px;
46
+ background-color: rgba(255, 255, 255, 0.1);
47
  }
48
 
49
  .chat-message .avatar img {
50
+ width: 50px;
51
+ height: 50px;
52
  border-radius: 50%;
53
  object-fit: cover;
54
+ border: 2px solid rgba(255, 255, 255, 0.3);
55
  }
56
 
57
  .chat-message .message {
58
  width: 85%;
59
+ padding: 15px;
60
  font-size: 1rem;
61
+ line-height: 1.6;
62
  }
63
 
64
+ .chat-message.user .message {
65
+ text-align: left;
66
+ }
67
+
68
+ .upload-section {
69
+ background-color: white;
70
+ border-radius: 12px;
71
+ padding: 20px;
72
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
73
+ margin-bottom: 20px;
74
+ }
75
+
76
+ .upload-section h3 {
77
+ color: #2575fc;
78
+ margin-bottom: 15px;
79
+ }
80
+
81
+ .stTextInput > div > div > input {
82
+ border-radius: 8px;
83
+ border: 1px solid #e0e0e0;
84
+ padding: 10px;
85
+ font-size: 1rem;
86
+ }
87
+
88
+ .stButton > button {
89
+ background-color: #2575fc !important;
90
+ color: white !important;
91
+ border-radius: 8px !important;
92
+ padding: 10px 20px !important;
93
+ transition: all 0.3s ease !important;
94
+ }
95
+
96
+ .stButton > button:hover {
97
+ background-color: #1a5aff !important;
98
+ transform: translateY(-2px);
99
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
100
  }
101
  </style>
102
  '''
103
 
104
  bot_template = '''
105
+ <div class="chat-message bot">
106
  <div class="avatar">
107
+ <img src="https://i.imgur.com/7zxqQ3y.png" alt="Bot Avatar">
108
  </div>
109
  <div class="message">{{MSG}}</div>
110
  </div>
111
  '''
112
 
113
  user_template = '''
114
+ <div class="chat-message user">
115
  <div class="avatar">
116
+ <img src="https://i.imgur.com/3JbqQAZ.png" alt="User Avatar">
117
  </div>
118
  <div class="message">{{MSG}}</div>
119
  </div>
120
+ '''