Update app.py

app.py

@@ -144,26 +144,13 @@ def apply_filter(filter_type, input_image=None):
     elif filter_type == "Grayscale":
         return apply_grayscale_filter(frame)
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Görüntü Filtreleri Uygulaması")
+def reset_images():
+    """Yüklenen ve filtreli görüntüleri temizlemek için kullanılır."""
+    return None, None
 
-    filter_type = gr.Dropdown(
-        label="Filtre Seçimi:",
-        choices=["Retro", "Grayscale", "Cartoon", "Oil Painting", "Emboss", "Brightness & Contrast", 
-                 "Pencil Drawing", "Pastel", "HDR", "Summer", "Winter", "Glass Shatter", "Glitch" ],
-        value="Retro"
-    )
-
-    input_image = gr.Image(label="Resim Yükle", type="numpy")
-    output_image = gr.Image(label="Filtre Uygulandı")
-
-    apply_button = gr.Button("Filtreyi Uygula")
-    apply_button.click(fn=apply_filter, inputs=[filter_type, input_image], outputs=output_image)
-
-
-with gr.Blocks(css=""" 
+# Gradio arayüz tanımlamaları
+with gr.Blocks(css="""
     .main { background-color: #1f1f1f; }
-    .block { background-color: #1f1f1f; }
     .gradio-container { background-color: #1f1f1f; }
     .custom-button { 
         background-color: #00163a; 
@@ -178,44 +165,46 @@ with gr.Blocks(css="""
         background-color: #001c4d; 
     }
     #header { 
-        text-align: center; 
-        color: #ffffff;  /* Başlık rengi beyaz */
+        text-align: center;
+        color: #ffffff; 
     }
     body { 
-        background-color: #000f26;  /* Daha koyu lacivert arka plan rengi */
+        background-color: #000f26; 
     }
-    #input-image { 
-        background-color: #000f26;  /* Koyu mavi arka plan rengi */
-        padding: 20px; 
-        border-radius: 10px; 
-    }
-    #output-image { 
-        background-color: #000f26;  /* Koyu mavi arka plan rengi */
+    #input-image, #output-image { 
+        background-color: #000f26; 
         padding: 20px; 
         border-radius: 10px; 
     }
     #filter-dropdown { 
-        background-color: #000f26;  /* Filtre seçin arka plan rengi */
-        color: white;  /* Yazı rengi beyaz */
-        border: none; 
+        background-color: #00163a;  /* Burada arka plan rengini değiştirdik */
+        color: #00ccff;  
+        border: 2px solid #00ccff;
         padding: 10px; 
         border-radius: 10px; 
+        font-size: 16px;
+        text-align: center;
     }
 """) as demo:
     gr.Markdown("<h1 id='header'>Görüntü Filtreleri Uygulaması</h1>")
-
+    
     filter_type = gr.Dropdown(
         label="Filtre Seçin",
         choices=["Retro", "Grayscale", "Cartoon", "Oil Painting", "Emboss", "Brightness & Contrast", 
-                 "Pencil Drawing","Pastel", "HDR", "Summer", "Winter", "Glass Shatter", "Glitch"],
+                 "Pencil Drawing", "Pastel", "HDR", "Summer", "Winter", "Glass Shatter", "Glitch"],
         value="Retro",
         elem_id="filter-dropdown"
     )
 
-    input_image = gr.Image(label="Resim Yükle", type="numpy", elem_id="input-image")
-    output_image = gr.Image(label="Filtre Uygulandı", elem_id="output-image")
+    with gr.Row():
+        input_image = gr.Image(label="Resim Yükle", type="numpy", elem_id="input-image", width=300, height=300)
+        output_image = gr.Image(label="Filtre Uygulandı", elem_id="output-image", width=300, height=300)
+    
+    with gr.Row():
+        apply_button = gr.Button("Filtreyi Uygula", elem_id="apply-button", elem_classes="custom-button")
+        reset_button = gr.Button("Sıfırla", elem_id="reset-button", elem_classes="custom-button")
 
-    apply_button = gr.Button("Filtreyi Uygula", elem_id="apply-button", elem_classes="custom-button")
     apply_button.click(fn=apply_filter, inputs=[filter_type, input_image], outputs=output_image)
+    reset_button.click(fn=reset_images, inputs=[], outputs=[input_image, output_image])
 
 demo.launch()