app.py

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"},
                      width=200, height=150, margin=dict(l=20, r=20, t=20, b=20))
    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):
    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: Проверка
        with gr.TabItem("Проверка", id=3):
            
            # Заголовки столбцов
            with gr.Row():
                gr.Markdown("")
                gr.Markdown("### Корректор")
                gr.Markdown("### Аналитик")
                
            # Первый ряд
            with gr.Row():
                personalized_message_1 = gr.Textbox(label="Персонализированное сообщение 1", lines=4)
                check_message_1 = gr.Textbox(label="Проверка сообщения 1", lines=4)
                # Центрируем спидометр только в правом столбце
                with gr.Column(elem_id="centered_plot"):
                    success_forecast_1 = gr.Plot(value=get_success_forecast_1(), label="Прогноз успешности сообщения 1")
            
            # Второй ряд
            with gr.Row():
                personalized_message_2 = gr.Textbox(label="Персонализированное сообщение 2", lines=4)
                check_message_2 = gr.Textbox(label="Проверка сообщения 2", lines=4)
                with gr.Column(elem_id="centered_plot"):
                    success_forecast_2 = gr.Plot(value=get_success_forecast_2(), label="Прогноз успешности сообщения 2")
            
            # Третий ряд
            with gr.Row():
                personalized_message_3 = gr.Textbox(label="Персонализированное сообщение 3", lines=4)
                check_message_3 = gr.Textbox(label="Проверка сообщения 3", lines=4)
                with gr.Column(elem_id="centered_plot"):
                    success_forecast_3 = gr.Plot(value=get_success_forecast_3(), label="Прогноз успешности сообщения 3")

demo.launch()