Hugging Face's logo

Spaces:
sango07
/
Chat_with_multiple_PDF
Sleeping

App Files Community
Chat_with_multiple_PDF
File size: 2,445 Bytes 
09a6a92
 
8c7b46a
 
 
 
 
 
 
 
 
 
 
 
 
09a6a92
 
8c7b46a
 
 
 
 
 
 
 
 
 
09a6a92
 
 
8c7b46a
09a6a92
 
 
 
8c7b46a
 
09a6a92
 
 
 
 
 
 
8c7b46a
 
09a6a92
 
 
8c7b46a
 
09a6a92
 
8c7b46a
09a6a92
 
 
 
8c7b46a
09a6a92
8c7b46a
09a6a92
 
8c7b46a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
09a6a92
 
 
 
 
8c7b46a
09a6a92
8c7b46a
09a6a92
 
 
 
 
 
8c7b46a
09a6a92
8c7b46a
09a6a92
 
 
8c7b46a
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
css = '''
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

body {
    background-color: #f4f6f9;
    font-family: 'Inter', sans-serif;
}

.chat-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.chat-message {
    display: flex;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.chat-message:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.chat-message.user {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
}

.chat-message.bot {
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
    color: white;
}

.chat-message .avatar {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.1);
}

.chat-message .avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.chat-message .message {
    width: 85%;
    padding: 15px;
    font-size: 1rem;
    line-height: 1.6;
}

.chat-message.user .message {
    text-align: left;
}

.upload-section {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.upload-section h3 {
    color: #2575fc;
    margin-bottom: 15px;
}

.stTextInput > div > div > input {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 10px;
    font-size: 1rem;
}

.stButton > button {
    background-color: #2575fc !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}

.stButton > button:hover {
    background-color: #1a5aff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
'''

bot_template = '''
<div class="chat-message bot">
    <div class="avatar">
        <img src="https://i.imgur.com/7zxqQ3y.png" alt="Bot Avatar">
    </div>
    <div class="message">{{MSG}}</div>
</div>
'''

user_template = '''
<div class="chat-message user">
    <div class="avatar">
        <img src="https://i.imgur.com/3JbqQAZ.png" alt="User Avatar">
    </div>    
    <div class="message">{{MSG}}</div>
</div>
'''