File size: 4,483 Bytes
37086c1 |
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 |
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
# 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),
})
# 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..."
# 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=1, min_width=300):
# Summary
summary_output = gr.Textbox(label="Summary")
with gr.Column(scale=2, min_width=300):
# Star rating
star_rating = gr.HTML(value=show_stars())
# Keywords
keywords_output = gr.Textbox(label="Keywords")
# Testing Area -Piitu
with gr.Tab("Testing Area"):
with gr.Row():
name_input = gr.Textbox(label="Enter your name", placeholder="Enter your name here...")
with gr.Row():
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)
demo.launch() |