Update app.py

app.py

@@ -1,4 +1,40 @@
 import gradio as gr
+import plotly.graph_objects as go
+
+# Функция для создания спидометра
+def create_gauge(value):
+    fig = go.Figure(go.Indicator(
+        mode="gauge+number",
+        value=value,
+        gauge={
+            'axis': {'range': [0, 100]},
+            'bar': {'color': "black"},  # Цвет стрелки
+            'steps': [
+                {'range': [0, 40], 'color': "#55efc4"},  # Мягкий зеленый
+                {'range': [40, 70], 'color': "#ffeaa7"},  # Желтый
+                {'range': [70, 100], 'color': "#ff7675"}  # Мягкий красный
+            ],
+            'threshold': {
+                'line': {'color': "black", 'width': 4},
+                'thickness': 0.75,
+                'value': value
+            }
+        },
+        number={'font': {'size': 48}}  # Размер шрифта числа
+    ))
+    fig.update_layout(paper_bgcolor="#f8f9fa",  # Цвет фона
+                      font={'color': "#2d3436", 'family': "Arial"})  # Цвет текста
+    return fig
+
+# Значения для спидометров
+def get_success_forecast_1():
+    return create_gauge(76)
+
+def get_success_forecast_2():
+    return create_gauge(85)
+
+def get_success_forecast_3():
+    return create_gauge(62)
 
 # Функция для смены вкладки
 def change_tab(id):
@@ -67,19 +103,19 @@ with gr.Blocks() as demo:
             with gr.Row():
                 personalized_message_1 = gr.Textbox(label="Персонализированное сообщение 1", lines=4)
                 check_message_1 = gr.Textbox(label="Проверка сообщения 1", lines=4)
-                success_forecast_1 = gr.Textbox(label="Прогноз успешности сообщения 1", lines=4)
+                success_forecast_1 = gr.Plot(value=get_success_forecast_1(), label="Прогноз успешности сообщения 1")  # Спидометр 1
             
             # Второй ряд
             with gr.Row():
                 personalized_message_2 = gr.Textbox(label="Персонализированное сообщение 2", lines=4)
                 check_message_2 = gr.Textbox(label="Проверка сообщения 2", lines=4)
-                success_forecast_2 = gr.Textbox(label="Прогноз успешности сообщения 2", lines=4)
+                success_forecast_2 = gr.Plot(value=get_success_forecast_2(), label="Прогноз успешности сообщения 2")  # Спидометр 2
             
             # Третий ряд
             with gr.Row():
                 personalized_message_3 = gr.Textbox(label="Персонализированное сообщение 3", lines=4)
                 check_message_3 = gr.Textbox(label="Проверка сообщения 3", lines=4)
-                success_forecast_3 = gr.Textbox(label="Прогноз успешности сообщения 3", lines=4)
+                success_forecast_3 = gr.Plot(value=get_success_forecast_3(), label="Прогноз успешности сообщения 3")  # Спидометр 3
 
 
 demo.launch()