File size: 5,304 Bytes
71b8046
1490afc
 
 
71b8046
1490afc
 
 
 
 
 
 
 
 
 
 
fdfe9b6
1490afc
 
 
 
 
 
fdfe9b6
1490afc
 
 
 
fdfe9b6
1490afc
 
 
 
 
 
 
 
 
fdfe9b6
1490afc
 
 
 
 
 
 
 
 
fdfe9b6
1490afc
 
 
 
 
 
 
 
 
 
fdfe9b6
1490afc
 
 
 
 
 
 
 
 
 
 
 
 
 
fdfe9b6
1490afc
 
 
 
 
 
 
 
 
 
 
 
fdfe9b6
1490afc
 
 
23f90e0
1490afc
 
 
 
 
 
23f90e0
1490afc
 
 
 
 
71b8046
1490afc
 
 
 
 
 
 
23f90e0
1490afc
8cb2f26
1490afc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71b8046
1490afc
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
import gradio as gr
import pandas as pd
import numpy as np
import random

def show_stars():
    """ Function that shows the HTML script for stars -Janika"""
    stars_html = """
    <style>
        /* Title */
        .title-text {
        color: white;
        font-family: sans-serif;
        font-size: 14px;
        font-weight: bold;
        }

        /* Empty stars */
        .star-rating {
            display: inline-block;
            font-size: 1.5em;
            color: lightgray;
        }

        /* Filled stars */
        .star-rating .star.filled {
            color: gold;
        }

        /* Box for the whole star rating component */
        .rating-box {
            border: 1px transparent;
            background-color: #1f2937;
            padding: 10px;
            border-radius: 5px;
            width: 100%;
            margin-left: 0;
        }

        /* Box for the title */
        .title-box {
            border: 1px transparent;
            background-color: #ca8a04;
            padding: 3px;
            border-radius: 8px;
            display: inline-block;
            margin-bottom: 6px;
        }

        /* Box for stars */
        .star-box {
            border: 1px transparent;
            background-color: #374151;
            padding: 10px;
            border-radius: 5px;
            width: fit-content;
            margin: 0;
        }
    </style>

    <div class="rating-box">
        <div class="title-box">
            <p class="title-text">Star rating</p>
        </div>
        <div class="star-box">
            <div class="star-rating" data-rating="4">
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ratingElement = document.querySelector('.star-rating');
            const rating = parseInt(ratingElement.getAttribute('data-rating'));
            const stars = ratingElement.querySelectorAll('.star');
            for (let i = 0; i < rating; i++) {
                stars[i].classList.add('filled');
            }
        });
    </script>
    """
    return stars_html

# Function to handle feedback submission -Piitu
def handle_feedback(feedback, name):
    return f"Thank you for your feedback, {name}!"

# Function to update placeholder text -Piitu
def update_placeholder(name):
    if name:
        return f"Enter your feedback here, {name}..."
    else:
        return "Enter your feedback here..."

# Random data for testing, actual data added later
df = pd.DataFrame({
    'Year': np.random.randint(2000, 2024, 25),
    'Reviews': np.random.randint(120, 320, 25),
})

# Theme
theme = gr.themes.Soft(
    primary_hue="yellow",
    secondary_hue="amber",
    spacing_size="sm",
    radius_size="lg",
)

with gr.Blocks(theme=theme) as demo:

    # Basic user interface for company's view -Janika
    with gr.Tab("User Interface"):
        with gr.Row():
            with gr.Column(scale=2, min_width=300):
                # Overall summary from all feedback
                com_summary_output = gr.Textbox(label="Summary")

            with gr.Column(scale=1, min_width=300):
                # Average star rating across all feedback
                com_star_rating = gr.HTML(value=show_stars())

                # The most common keywords across all feedback
                com_keywords_output = gr.Textbox(label="Keywords")


     # Testing Area -Piitu
    with gr.Tab("Testing Area"):
        with gr.Row():
            with gr.Column(scale=1, min_width=300):
                name_input = gr.Textbox(label="Enter your name", placeholder="Enter your name here...")

                text_input = gr.Textbox(label="Please give us feedback!", 
                                        placeholder="Enter your feedback here...", 
                                        max_length=5000)

                # Update placeholder based on name input -Piitu
                name_input.change(fn=update_placeholder, inputs=name_input, outputs=text_input)

                # Send button -Piitu
                send_button = gr.Button("Send")

                # Output for feedback submission confirmation -Piitu
                feedback_output = gr.Textbox(label="Submission Result", interactive=False)

                # Link button to function that handles feedback submission -Piitu
                send_button.click(handle_feedback, inputs=[text_input, name_input], outputs=feedback_output)

            with gr.Column(scale=2, min_width=300):
                # Estimated star rating from customer's feedback -Janika
                cus_star_rating = gr.HTML(value=show_stars())

                # Estimated sentiment from customer's feedback -Janika
                cus_sentiment = gr.Textbox(label="Sentiment")
                
                # Summary from customer's feedback -Janika
                cus_summary_output = gr.Textbox(label="Summary")

                # The most common keywords from customer's feedback -Janika
                cus_keywords_output = gr.Textbox(label="Keywords")  

demo.launch()