Update app.py

app.py

@@ -103,47 +103,81 @@ footer {
     padding: 0;
     overflow: hidden;
 }
-@import url('https://fonts.googleapis.com/css2?familyPoppins:wght@400;500;700&display=swap');
+
 /* Применяем шрифты */
-body, input, button, textarea, select,.gr-button {
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+body, input, button, textarea, select, .gr-button {
     font-family: 'Poppins', sans-serif;
-    background-color: #191a1e!important;
+    background-color: #191a1e !important;
     color: #FFFFFF;
 }
+
 /* Настройки заголовков */
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     color: #FFFFFF;
 }
+
 /* Стиль для текстовых полей и кнопок */
 input[type="text"], textarea {
-    background-color: #191a1e!important;
+    background-color: #191a1e !important;
     color: #FFFFFF;
     border: 1px solid #FFFFFF;
 }
+
 /* Цвет кнопки Generate */
 .generate-button {
-    background-color: #5271FF!important;
-    color: #FFFFFF!important;
+    background-color: #5271FF !important;
+    color: #FFFFFF !important;
     border: none;
     font-weight: bold;
 }
+
 .generate-button:hover {
-    background-color: #405BBF!important; /* Цвет при наведении */
+    background-color: #405BBF !important; /* Цвет при наведении */
+}
+
+/* Унификация фона и стиля Drop Image */
+.gr-image-upload {
+    background-color: transparent !important;
+    border: 1px dashed #FFFFFF !important;
+}
+
+/* Скрытие стандартного фона Drop Image */
+.gr-image-upload > .dropzone > .inner {
+    background-color: transparent !important;
+}
+
+/* Централизованный текст внутри Drop Image */
+.gr-image-upload > .dropzone > .inner::before {
+    content: 'Drop Image Here';
+    color: #FFFFFF;
+    font-size: 1rem;
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 /* Выравнивание элементов */
 .drop-image-container {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-.drop-image,.processed-image {
+
+.drop-image, .processed-image {
     margin-bottom: 20px;
 }
+
 .foreground-ratio-container {
     margin-top: 20px;
     margin-bottom: 20px;
 }
+
 .generate-button {
     margin-top: 20px;
     margin-left: auto;
@@ -155,7 +189,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
         # Заголовок
         gr.Markdown("**Upload and Process Your Image**", elem_classes="prompt-text")
 
-        # Горизонтальное расположение изображений
+        # Размещение изображений
         with gr.Row(elem_id="image-row"):
             input_image = gr.Image(
                 label="Upload Image",
@@ -174,7 +208,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 height=300,
             )
 
-        # Слайдер
+        # Слайдер для параметров
         with gr.Row(elem_id="slider-row"):
             foreground_ratio = gr.Slider(
                 label="Foreground Ratio",
@@ -184,7 +218,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 step=0.05,
             )
 
-        # Настройки и кнопка
+        # Настройки и кнопка генерации
         with gr.Row(elem_id="settings-row"):
             do_remove_background = gr.Checkbox(
                 label="Remove Background",
@@ -225,34 +259,6 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             outputs=[output_model, output_model2]
         )
 
-# CSS для унификации
-css += """
-/* Унификация стиля Drop Image */
-.gr-image-upload {
-    background-color: transparent !important;
-    border: 1px dashed #FFFFFF !important;
-}
-
-/* Скрытие заглушки Drop Image */
-.gr-image-upload > .dropzone > .inner > .file-upload {
-    display: none !important;
-}
-
-/* Общий стиль для текста */
-.gr-image-upload > .dropzone > .inner::before {
-    content: 'Drop Image Here';
-    color: #FFFFFF;
-    font-size: 1rem;
-    font-weight: bold;
-    text-align: center;
-    margin-top: 50%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-"""
-
-# Запуск приложения
+# Запуск интерфейса
 demo.queue(max_size=10)
 demo.launch()