File size: 3,788 Bytes
f2afc8d
ab69918
3cf3cc6
cd8cf32
1bf1be7
3cf3cc6
ab69918
f2afc8d
3cf3cc6
95835e2
3cf3cc6
 
cd8cf32
3cf3cc6
 
 
ab69918
f2afc8d
ab69918
 
 
f2afc8d
d24ae42
e420025
d24ae42
 
 
0676c43
d24ae42
6307fcb
d660823
6307fcb
827fd5f
6307fcb
 
d24ae42
 
0676c43
d24ae42
6307fcb
d660823
 
827fd5f
 
 
d24ae42
 
 
0676c43
d24ae42
0676c43
 
 
 
6307fcb
be1510f
d24ae42
 
0676c43
d24ae42
0676c43
 
 
d660823
 
d24ae42
 
 
0676c43
d24ae42
d660823
0676c43
d660823
 
 
 
d24ae42
 
0676c43
d24ae42
0676c43
 
d660823
 
 
 
0676c43
d24ae42
 
 
 
0676c43
 
d24ae42
 
0676c43
d660823
 
d24ae42
0676c43
d24ae42
 
0676c43
 
 
d660823
 
0676c43
d24ae42
 
0676c43
d660823
 
095ee1c
e420025
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ab69918
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
121
122
123
124
125
126
127
128
129
130
import gradio as gr
import os
from llama_index.core import SimpleDirectoryReader, VectorStoreIndex, Settings
from llama_index.llms.openai import OpenAI

# Set OpenAI API key from environment
os.environ["OPENAI_API_KEY"] = os.getenv("OPENAI_API_KEY")

# Configure the default LLM
Settings.llm = OpenAI(model="gpt-4.1-nano")

# Load documents and build index
documents = SimpleDirectoryReader("documents").load_data()
index = VectorStoreIndex.from_documents(documents)

# Create query engine
query_engine = index.as_query_engine()

def chatbot_response(message):
    response = query_engine.query(message)
    return str(response)

# Custom CSS for purple button styling - Target Submit button specifically
custom_css = """
/* Target Submit button with all its classes */
button.lg.primary.svelte-cmf5ev,
button.primary.svelte-cmf5ev,
button.lg.primary,
button.primary {
    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
}

button.lg.primary.svelte-cmf5ev:hover,
button.primary.svelte-cmf5ev:hover,
button.lg.primary:hover,
button.primary:hover {
    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* Keep Clear button as secondary (gray) */
button.lg.secondary.svelte-cmf5ev,
button.secondary.svelte-cmf5ev,
button.lg.secondary,
button.secondary {
    background: #E5E7EB !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
}

button.lg.secondary.svelte-cmf5ev:hover,
button.secondary.svelte-cmf5ev:hover,
button.lg.secondary:hover,
button.secondary:hover {
    background: #F3F4F6 !important;
    color: #374151 !important;
    transform: translateY(-1px) !important;
}

/* Example buttons - ensure they stay readable */
button.gallery-item.svelte-p5q82i,
.gallery-item.svelte-p5q82i,
button.gallery-item,
.gallery-item {
    background: white !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
}

button.gallery-item.svelte-p5q82i:hover,
.gallery-item.svelte-p5q82i:hover,
button.gallery-item:hover,
.gallery-item:hover {
    background: #F9FAFB !important;
    color: #374151 !important;
    border-color: #9CA3AF !important;
    transform: translateY(-1px) !important;
}

/* Force text color in example buttons to be dark */
button.gallery-item.svelte-p5q82i,
button.gallery-item.svelte-p5q82i *,
.gallery-item.svelte-p5q82i,
.gallery-item.svelte-p5q82i *,
button.gallery-item,
button.gallery-item *,
.gallery-item,
.gallery-item * {
    color: #374151 !important;
}

/* Additional selectors for HF Spaces compatibility */
.gradio-container button.primary,
.gradio-container .primary,
[data-testid="primary-button"] {
    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
    border: none !important;
    color: white !important;
}

.gradio-container button.primary:hover,
.gradio-container .primary:hover,
[data-testid="primary-button"]:hover {
    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
}
"""

iface = gr.Interface(
    fn=chatbot_response,
    inputs="text",
    outputs="text",
    title="Ask about me",
    description="Ask questions and receive answers based on my bio.",
    examples=[["Provide a summary of Donald"],
              ["Has Donald worked with Python or machine learning?"],
              ["Tell me something interesting about Donald"],
              ["What technical skills does Donald have?"],
              ["How did Donald build this RAG chatbot?"]
             ],
    css=custom_css
)

iface.launch()