File size: 3,116 Bytes
c5db237
 
 
 
b1bfc93
0010262
63eb699
c5db237
591bd65
 
 
 
 
 
 
 
b1bfc93
591bd65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c5db237
40e6d96
0010262
 
 
 
 
 
 
591bd65
 
 
 
 
 
 
 
 
 
 
 
 
 
40e6d96
1e4655b
 
 
 
 
 
 
c2b312f
1e4655b
 
c2b312f
 
 
1e4655b
0010262
 
 
c2b312f
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
import gradio as gr
import pandas as pd
import gspread
from google.auth import default
import requests
import time 
import json

# ... (The rest of your code remains the same)

# Define custom CSS styles for the buttons
custom_css = """
<style>
    .button-container {
        display: flex;
        justify-content: space-between;
    }
    .feedback-button {
        background-color: #008CBA;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 5px;
    }
    .feedback-button:hover {
        background-color: #005e87;
    }
</style>
"""

# Set up the Gradio Interface
feedback_interface = gr.Interface(
    fn=feedback_response,
    inputs=[
        gr.Textbox(label="Input Message"),
        gr.Textbox(label="Additional Comments")
    ],
    outputs=[
        gr.HTML(label="Feedback (Top Row)", html=custom_css + """
            <div class="button-container">
                <button class="feedback-button" id="good-feedback" onclick="setFeedback('Good')">Good</button>
                <button class="feedback-button" id="bad-feedback" onclick="setFeedback('Bad')">Bad</button>
                <button class="feedback-button" id="inappropriate-feedback" onclick="setFeedback('Inappropriate')">Inappropriate</button>
            </div>
        """),
        gr.HTML(label="Feedback (Bottom Row)", html=custom_css + """
            <div class="button-container">
                <button class="feedback-button" id="informative-feedback" onclick="setFeedback('Informative')">Informative</button>
                <button class="feedback-button" id="inaccurate-feedback" onclick="setFeedback('Inaccurate')">Inaccurate</button>
                <button class="feedback-button" id="nonsense-feedback" onclick="setFeedback('Nonsense')">Nonsense</button>
            </div>
        """)
    ],
    title="Beta: Itell Guide Response Bot",
    description="""
    # Introduction
    This is an interface to test iTELL's guide on the side. Please be aware that responses can take up to 20 seconds
    # Step by Step Introduction
    1. Place a question in the input message textbox
    2. Wait roughly 10 ~ 20 seconds for the response and elapsed time to come out on the right
    3. After looking at the results, click on the feedback options that best describe the output: Good, Bad, Inappropriate, Informative, Inaccurate, Nonsense
    4. After choosing the best option, write down additional comments for more feedback
    5. Press submit again and wait for the output to come out again for your feedback to be submitted
    6. Once the "Thank you for your feedback. Your response and feedback have been recorded!" message is shown, you are done
    ** DISCLAIMER: You have to type an input message, click on the feedback buttons, and type in additional comments for your responses to be recorded
    ** For further questions, contact LEAR Labs!
    """
)

# Launch the interface
feedback_interface.launch()