File size: 3,333 Bytes
71b8046 fdfe9b6 3265c8d fdfe9b6 3265c8d fdfe9b6 3265c8d fdfe9b6 3265c8d fdfe9b6 71b8046 fdfe9b6 71b8046 fdfe9b6 71b8046 3265c8d fdfe9b6 3265c8d 71b8046 3265c8d 71b8046 fdfe9b6 71b8046 |
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 |
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),
})
# 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, for Piitu -Janika
with gr.Tab("Testing Area"):
with gr.Row():
text_input = gr.Textbox()
demo.launch() |