app.py

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()