Hugging Face's logo

Spaces:
zerostratos
/
demo_medical_QA
Sleeping

App Files Community
zerostratos commited on
Commit
17be31f
·
verified ·
1 Parent(s): 6f3ad16

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +31 -11
app.py CHANGED
@@ -14,39 +14,59 @@ def chat_with_model(user_input):
14
  )
15
  return response['choices'][0]['message']['content']
16
 
17
- # Define CSS for clinic-like appearance
18
  custom_css = """
19
  body {
20
- background-color: #e6f7ff; /* Light clinic-blue background */
21
  font-family: 'Arial', sans-serif;
22
  }
23
  .gradio-container {
24
- border: 2px solid #cce7ff;
25
  border-radius: 15px;
26
- padding: 20px;
27
  background-color: #ffffff;
 
28
  }
29
  h1 {
30
- color: #2c6693;
 
 
 
 
 
 
 
31
  }
32
  input, textarea {
33
- border: 1px solid #b3d9ff;
34
  border-radius: 10px;
35
- padding: 10px;
36
  width: 100%;
37
- font-size: 16px;
38
  }
39
  .gr-button {
40
  background-color: #4da6ff;
41
  border: none;
42
  border-radius: 10px;
43
  color: white;
44
- padding: 10px 20px;
 
45
  cursor: pointer;
 
 
 
46
  }
47
  .gr-button:hover {
48
  background-color: #3399ff;
49
  }
 
 
 
 
 
 
 
 
50
  """
51
 
52
  # Create the Gradio interface
@@ -54,8 +74,8 @@ iface = gr.Interface(
54
  fn=chat_with_model,
55
  inputs="text",
56
  outputs="text",
57
- title="QA-Medical Chatbot",
58
- description="Ask the model any medical question!",
59
  theme="default",
60
  css=custom_css
61
  )
 
14
  )
15
  return response['choices'][0]['message']['content']
16
 
17
+ # Define CSS for patient-friendly appearance
18
  custom_css = """
19
  body {
20
+ background-color: #f0f9ff; /* Softer light blue background */
21
  font-family: 'Arial', sans-serif;
22
  }
23
  .gradio-container {
24
+ border: 2px solid #b3e0ff;
25
  border-radius: 15px;
26
+ padding: 30px;
27
  background-color: #ffffff;
28
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
29
  }
30
  h1 {
31
+ color: #4a90e2;
32
+ text-align: center;
33
+ font-size: 28px;
34
+ }
35
+ p {
36
+ font-size: 18px;
37
+ color: #333333;
38
+ text-align: center;
39
  }
40
  input, textarea {
41
+ border: 2px solid #b3d9ff;
42
  border-radius: 10px;
43
+ padding: 15px;
44
  width: 100%;
45
+ font-size: 18px;
46
  }
47
  .gr-button {
48
  background-color: #4da6ff;
49
  border: none;
50
  border-radius: 10px;
51
  color: white;
52
+ padding: 15px 25px;
53
+ font-size: 18px;
54
  cursor: pointer;
55
+ margin-top: 20px;
56
+ display: block;
57
+ width: 100%;
58
  }
59
  .gr-button:hover {
60
  background-color: #3399ff;
61
  }
62
+ .gradio-container:before {
63
+ content: "💬 How can we help you today?";
64
+ display: block;
65
+ text-align: center;
66
+ font-size: 24px;
67
+ color: #2c6693;
68
+ margin-bottom: 20px;
69
+ }
70
  """
71
 
72
  # Create the Gradio interface
 
74
  fn=chat_with_model,
75
  inputs="text",
76
  outputs="text",
77
+ title="Friendly Medical Chatbot",
78
+ description="Feel free to ask any questions. We’re here to help!",
79
  theme="default",
80
  css=custom_css
81
  )