Update app.py

app.py

@@ -42,6 +42,17 @@ def change_tab(id):
     return gr.Tabs(selected=id)
 
 with gr.Blocks() as demo:
+    # Добавляем CSS для центрирования спидометров
+    gr.HTML("""
+    <style>
+      #centered_plot {
+          display: flex;
+          justify-content: center;
+          width: 100%;
+      }
+    </style>
+    """)
+    
     with gr.Tabs() as tabs:
         
         # Вкладка 4: Проверка
@@ -58,27 +69,21 @@ with gr.Blocks() as demo:
                 personalized_message_1 = gr.Textbox(label="Персонализированное сообщение 1", lines=4)
                 check_message_1 = gr.Textbox(label="Проверка сообщения 1", lines=4)
                 # Центрируем спидометр только в правом столбце
-                with gr.Column():
-                    gr.HTML("<div style='display:flex; justify-content:center; width:100%;'>")
+                with gr.Column(elem_id="centered_plot"):
                     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)
-                with gr.Column():
-                    gr.HTML("<div style='display:flex; justify-content:center; width:100%;'>")
+                with gr.Column(elem_id="centered_plot"):
                     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)
-                with gr.Column():
-                    gr.HTML("<div style='display:flex; justify-content:center; width:100%;'>")
+                with gr.Column(elem_id="centered_plot"):
                     success_forecast_3 = gr.Plot(value=get_success_forecast_3(), label="Прогноз успешности сообщения 3")
-                    gr.HTML("</div>")
 
 demo.launch()