we work on the interface that allows user to see how he can use his real estate object. The service returns a json with eligibable chains in the following format:

```json
{
  "eligible_chains": [
    {
      "chain": "Магнит у дома",
      "category": "Супермаркеты",
      "min_area": 900,
      "max_area": 3000,
      "near_residential_area": true,
      "high_vehicle_traffic": true,
      "utilities": true
    },
    {
      "chain": "Магнит  косметик",
      "category": "Супермаркеты",
      "min_area": 480,
      "max_area": 2000,
      "near_residential_area": true,
      "high_vehicle_traffic": true,
      "utilities": true
    }
}
```

modify gradio interface in main.py to show this data in more user-friendly way using modern and minimalist design: display each json item as a product card like on marketplace

```
import os

import gradio as gr
import requests
from constants import *
from dotenv import find_dotenv, load_dotenv
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from omegaconf import OmegaConf

# Load configuration from config.yaml
config = OmegaConf.load("./src/app/conf/config.yaml")

load_dotenv(find_dotenv(usecwd=True))  # Load environment variables from .env file
base_url = os.getenv("BASE_URL", "http://localhost:8000")

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

def format_eligible_chains(eligible_chains):
    formatted_data = "<div style='font-family: Arial, sans-serif;'>"
    for chain in eligible_chains:
        formatted_data += f"""
        <div style='border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 5px;'>
            <h3 style='margin: 0; color: #333;'>{chain['chain']}</h3>
            <p style='margin: 5px 0;'><strong>Category:</strong> {chain['category']}</p>
            <p style='margin: 5px 0;'><strong>Min Area:</strong> {chain['min_area']} m²</p>
            <p style='margin: 5px 0;'><strong>Max Area:</strong> {chain['max_area']} m²</p>
            <p style='margin: 5px 0;'><strong>Near Residential Area:</strong> {'Yes' if chain['near_residential_area'] else 'No'}</p>
            <p style='margin: 5px 0;'><strong>High Vehicle Traffic:</strong> {'Yes' if chain['high_vehicle_traffic'] else 'No'}</p>
            <p style='margin: 5px 0;'><strong>Utilities:</strong> {'Yes' if chain['utilities'] else 'No'}</p>
        </div>
        """
    formatted_data += "</div>"
    return formatted_data


def predict_user_input(*user_input_values):
    user_input_keys = ["Метро", "Округ", "Город", "Категория объявления", "Состояние", "Общая площадь", "Этаж", "Этажность дома", "Время до станции", "пешком/транспортом", "Город", "Округ", "Улица", "Номер дома", "Почтовый индекс", "model"]
    user_input = dict(zip(user_input_keys, user_input_values))
    response = requests.post(f"{base_url}/model/predict/", json=user_input)
    predicted_price = response.json()["predicted_price_per_sqm"]

    location_request = {
        "latitude": user_input["latitude"],
        "longitude": user_input["longitude"],
        "radius": 1  # Assuming a radius of 1 km for the example
    }
    response = requests.post(f"{base_url}/data/prices_in_radius", json=location_request)
    prices = response.json()
    max_price = max(prices)
    min_price = min(prices)

    return predicted_price, max_price, min_price

def format_eligible_chains(eligible_chains):
    formatted_data = ""
    for chain in eligible_chains:
        formatted_data += f"Chain: {chain['chain']}\n"
        formatted_data += f"Category: {chain['category']}\n"
        formatted_data += f"Min Area: {chain['min_area']} m²\n"
        formatted_data += f"Max Area: {chain['max_area']} m²\n"
        formatted_data += f"Near Residential Area: {'Yes' if chain['near_residential_area'] else 'No'}\n"
        formatted_data += f"High Vehicle Traffic: {'Yes' if chain['high_vehicle_traffic'] else 'No'}\n"
        formatted_data += f"Utilities: {'Yes' if chain['utilities'] else 'No'}\n"
        formatted_data += "\n"
    return formatted_data

def check_facility_eligibility(*input_data):
    user_input = {
        "total_area": input_data[0],
        "floor": input_data[1],
        "near_residential_area": input_data[2][0] == "Находится ли вблизи жилого района с высоким пешеходным трафиком",
        "high_pedestrian_traffic": input_data[2][1] == "Имеет ли высокий пешеходный трафик рядом",
        "high_vehicle_traffic": input_data[2][2] == "Имеет ли высокий автомобильный трафик рядом",
        "nearby_facilities": input_data[2][3] == "Есть ли в пределах 100 метров детские, образовательные, спортивные или медицинские учреждения",
        "utilities": input_data[2][4] == "Есть ли все необходимые коммуникации (вода, электричество, канализация и т. д.)",
        "sanitary_facility": input_data[2][5] == "Есть ли у объекта санитарный узел (туалет)",
        "expected_visitors": input_data[2][6] == "Ожидается ли, что объект будет иметь как минимум 20,000 посетителей в день (для ТЦ)",
        "cargo_unloading": input_data[2][7] == "Есть ли возможность разгрузки грузового транспорта на месте",
        "parking_available": input_data[2][8] == "Имеется ли парковка у объекта недвижимости"
    }
    response = requests.post(f"{base_url}/eligibility/check/facility", json=user_input)
    eligible_chains = response.json()["eligible_chains"]
    return format_eligible_chains(eligible_chains)

def check_land_eligibility(*input_data):
    user_input = {
        "total_area": input_data[0],
        "near_residential_area": input_data[1][0] == "Близость к жилому сектору с высоким пешеходным трафиком",
        "high_vehicle_traffic": input_data[1][1] == "Высокий автомобильный трафик",
        "utilities": input_data[1][2] == "Наличие всех коммуникаций"
    }

    response = requests.post(f"{base_url}/eligibility/check/land", json=user_input)
    eligible_chains = response.json()["eligible_chains"]
    return format_eligible_chains(eligible_chains)

with gr.Blocks() as interface:
    with gr.Tabs():
        with gr.TabItem("Стоимость недвижимости"):
            gr.Markdown(f"""
            # {config.TITLE}
            ### {config.DESCRIPTION}
            """)

            with gr.Row():
                with gr.Column():
                    with gr.Accordion(config.LOCATION_SECTION):
                        inputs = []
                        inputs.append(gr.Dropdown(choices=metro_values, label="Метро"))
                        inputs.append(gr.Dropdown(choices=okrug_values, label="Округ"))
                        inputs.append(gr.Dropdown(choices=city_values, label="Город"))

                    with gr.Accordion(config.DETAILS_SECTION):
                        inputs.append(gr.Dropdown(choices=category_values, label="Категория объявления"))
                        inputs.append(gr.Dropdown(choices=condition_values, label="Состояние"))
                        inputs.append(gr.Slider(label='Общая площадь (м²)', minimum=10, maximum=800, value=30, step=1))
                        inputs.append(gr.Slider(label='Этаж', minimum=1, maximum=100, value=2, step=1))
                        inputs.append(gr.Slider(label='Этажность дома', minimum=1, maximum=100, value=5, step=1))

                with gr.Column():
                    with gr.Accordion(config.TRANSPORT_SECTION):
                        inputs.append(gr.Slider(label='Время до станции (минуты)', minimum=1, maximum=60, value=5, step=1))
                        inputs.append(gr.Dropdown(choices=transport_values, value="пешком", label='До станции'))

                    with gr.Accordion("Адрес"):
                        inputs.append(gr.Dropdown(choices=city_values, label="Город"))
                        inputs.append(gr.Dropdown(choices=okrug_values, label="Округ"))
                        inputs.append(gr.Textbox(label='Улица'))
                        inputs.append(gr.Number(label='Номер дома'))
                        inputs.append(gr.Number(label='Почтовый индекс'))

            with gr.Accordion(config.MODEL_SELECTION_SECTION):
                model_selection = gr.Radio(choices=["xgb_1", "xgb_2", "mlp_1"], label="Выберите модель")

            gr.Markdown("---")
            output_price = gr.Textbox(label="Предсказанная цена за м²")
            output_max_price = gr.Textbox(label="Максимальная цена за м² в радиусе")
            output_min_price = gr.Textbox(label="Минимальная цена за м² в радиусе")
            submit_btn = gr.Button(config.PREDICT_BUTTON_LABEL, variant="primary")
            submit_btn.click(fn=predict_user_input, inputs=inputs + [model_selection], outputs=[output_price, output_max_price, output_min_price])
            gr.Markdown(config.LOADING_MESSAGE)

        with gr.TabItem("Проверка требований сетевых арендаторов"):
            gr.Markdown("## Проверка требований сетевых арендаторов")

            with gr.Tabs():
                with gr.TabItem("Проверка объекта недвижимости"):
                    facility_inputs = [
                        gr.Number(label='Общая площадь (м²)', minimum=1),
                        gr.Number(label='Этаж', minimum=0),
                        gr.CheckboxGroup(
                            choices=[
                                "Находится ли вблизи жилого района с высоким пешеходным трафиком",
                                "Имеет ли высокий пешеходный трафик рядом",
                                "Имеет ли высокий автомобильный трафик рядом",
                                "Есть ли в пределах 100 метров детские, образовательные, спортивные или медицинские учреждения",
                                "Есть ли все необходимые коммуникации (вода, электричество, канализация и т. д.)",
                                "Есть ли у объекта санитарный узел (туалет)",
                                "Ожидается ли, что объект будет иметь как минимум 20,000 посетителей в день (для ТЦ)",
                                "Есть ли возможность разгрузки грузового транспорта на месте",
                                "Имеется ли парковка у объекта недвижимости"
                            ],
                            label='Выберите соответствующие критерии (отметьте "Да" или "Нет")',
                        )
                    ]
                    facility_output = gr.Textbox(label="Результат проверки")
                    facility_submit_btn = gr.Button("Проверить объект")
                    facility_submit_btn.click(fn=check_facility_eligibility, inputs=facility_inputs, outputs=facility_output)

                with gr.TabItem("Проверка земельного участка"):
                    land_inputs = [
                        gr.Number(label='Площадь земельного участка (м²)', minimum=0),
                        gr.CheckboxGroup(
                            choices=[
                                "Близость к жилому сектору с высоким пешеходным трафиком",
                                "Высокий автомобильный трафик",
                                "Наличие всех коммуникаций"
                            ],
                            label='Выберите соответствующие критерии (отметьте "Да" или "Нет")',
                        )
                    ]
                    land_output = gr.Textbox(label="Результат проверки")
                    land_submit_btn = gr.Button("Проверить участок")
                    land_submit_btn.click(fn=check_land_eligibility, inputs=land_inputs, outputs=land_output)

interface.launch(server_name="localhost", server_port=8080, debug=True)
```