Add project description and temporary slider to Gradio interface
Browse files- Introduce OpenSight project description in an accordion
- Add a temporary slider for demonstration purposes
- Modify result tile to display "SOON" instead of real/fake status
- Remove top margin from main container for tighter layout
app.py
CHANGED
@@ -243,7 +243,7 @@ def generate_results_html(results):
|
|
243 |
|
244 |
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
|
245 |
|
246 |
-
<div class="container mx-auto
|
247 |
<div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
|
248 |
<!-- Tile 1: SwinV2/detect -->
|
249 |
<div
|
@@ -429,7 +429,7 @@ def generate_results_html(results):
|
|
429 |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
|
430 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[4][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
431 |
</svg>
|
432 |
-
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">
|
433 |
</span>
|
434 |
</div>
|
435 |
<div>
|
@@ -481,6 +481,15 @@ with gr.Blocks() as iface:
|
|
481 |
confidence_slider = gr.Slider(0.0, 1.0, value=0.5, step=0.01, label="Confidence Threshold")
|
482 |
inputs = [image_input, confidence_slider]
|
483 |
with gr.Column(scale=2):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
484 |
image_output = gr.Image(label="Processed Image", visible=False)
|
485 |
# Custom HTML component to display results in 5 columns
|
486 |
results_html = gr.HTML(label="Model Predictions")
|
|
|
243 |
|
244 |
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
|
245 |
|
246 |
+
<div class="container mx-auto">
|
247 |
<div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
|
248 |
<!-- Tile 1: SwinV2/detect -->
|
249 |
<div
|
|
|
429 |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
|
430 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[4][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
431 |
</svg>
|
432 |
+
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">SOON</p>
|
433 |
</span>
|
434 |
</div>
|
435 |
<div>
|
|
|
481 |
confidence_slider = gr.Slider(0.0, 1.0, value=0.5, step=0.01, label="Confidence Threshold")
|
482 |
inputs = [image_input, confidence_slider]
|
483 |
with gr.Column(scale=2):
|
484 |
+
with gr.Accordion("Project OpenSight", open=True):
|
485 |
+
gr.Markdown("## Open source SOTA image moderation and detection tool.")
|
486 |
+
temp_slider = gr.Slider(
|
487 |
+
0, 1,
|
488 |
+
value=0.1,
|
489 |
+
step=0.1,
|
490 |
+
interactive=True,
|
491 |
+
label="Slide me",
|
492 |
+
)
|
493 |
image_output = gr.Image(label="Processed Image", visible=False)
|
494 |
# Custom HTML component to display results in 5 columns
|
495 |
results_html = gr.HTML(label="Model Predictions")
|