Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 import plotly.graph_objects as go
 
-# Функция для создания спидометра с добавлением отступа слева
+# Функция для создания спидометра
 def create_gauge(value):
     fig = go.Figure(go.Indicator(
         mode="gauge+number",
@@ -22,13 +22,9 @@ def create_gauge(value):
         },
         number={'font': {'size': 48}}  # Размер шрифта числа
     ))
-    # Добавляем отступы (особенно слева)
-    fig.update_layout(
-        paper_bgcolor="#f8f9fa",
-        font={'color': "#2d3436", 'family': "Arial"},
-        width=200, height=150,
-        margin=dict(l=80, r=20, t=20, b=20)  # Отступы слева (l=80)
-    )
+    fig.update_layout(paper_bgcolor="#f8f9fa",
+                      font={'color': "#2d3436", 'family': "Arial"},
+                      width=200, height=150, margin=dict(l=20, r=20, t=20, b=20))
     return fig
 
 # Значения для спидометров
@@ -61,18 +57,28 @@ 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.Plot(value=get_success_forecast_1(), label="Прогноз успешности сообщения 1")
+                # Центрируем спидометр только в правом столбце
+                with gr.Column():
+                    gr.HTML("<div style='display:flex; justify-content:center; width:100%;'>")
+                    success_forecast_1 = gr.Plot(value=get_success_forecast_1(), label="Прогноз успешности сообщения 1")
+                    gr.HTML("</div>")
             
             # Второй ряд
             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.Plot(value=get_success_forecast_2(), label="Прогноз успешности сообщения 2")
+                with gr.Column():
+                    gr.HTML("<div style='display:flex; justify-content:center; width:100%;'>")
+                    success_forecast_2 = gr.Plot(value=get_success_forecast_2(), label="Прогноз успешности сообщения 2")
+                    gr.HTML("</div>")
             
             # Третий ряд
             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.Plot(value=get_success_forecast_3(), label="Прогноз успешности сообщения 3")
+                with gr.Column():
+                    gr.HTML("<div style='display:flex; justify-content:center; width:100%;'>")
+                    success_forecast_3 = gr.Plot(value=get_success_forecast_3(), label="Прогноз успешности сообщения 3")
+                    gr.HTML("</div>")
 
 demo.launch()