Update app.py

app.py

@@ -20,20 +20,24 @@ from transformers import GroundingDinoForObjectDetection, GroundingDinoProcessor
 from diffusers import FluxPipeline
 from transformers import pipeline, AutoTokenizer, AutoModelForSeq2SeqLM
 import gc
+import base64
 
-def clear_memory():
-    """메모리 정리 함수"""
-    gc.collect()
-    try:
-        if torch.cuda.is_available():
-            with torch.cuda.device(0):  # 명시적으로 device 0 사용
-                torch.cuda.empty_cache()
-    except:
-        pass
 
 # GPU 설정
 device = torch.device("cuda:0" if torch.cuda.is_available() else "cpu")  # 명시적으로 cuda:0 지정
 
+###--------------ZERO GPU 필수/ 메모리 관리 공통 --------------------###
+def clear_memory():
+    gc.collect()
+    if torch.cuda.is_available():
+        try:
+            torch.cuda.empty_cache()
+            torch.cuda.synchronize()
+        except:
+            pass
+
+###---------------------------------------------------------------
+
 # GPU 설정을 try-except로 감싸기
 if torch.cuda.is_available():
     try:
@@ -481,21 +485,61 @@ button.primary:hover {
 }
 """
 
-###--------------ZERO GPU 필수/ 메모리 관리 공통 --------------------###
-def clear_memory():
-    gc.collect()
-    if torch.cuda.is_available():
-        try:
-            torch.cuda.empty_cache()
-            torch.cuda.synchronize()
-        except:
-            pass
 
+def get_image_base64(image_path):
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode()
 
+# 이미지를 Base64로 변환
+try:
+    example_img1 = get_image_base64("aa1.png")
+    example_img2 = get_image_base64("aa2.png")
+    example_img3 = get_image_base64("aa3.png")
+except Exception as e:
+    print(f"Error loading example images: {e}")
+    example_img1 = example_img2 = example_img3 = ""
 
-# UI 구성
-# UI 구성 부분에서 process_btn을 위로 이동하고 position_grid.click 부분 제거
+# HTML 템플릿 수정
+example_html = f"""
+<div style="margin-top: 50px; padding: 20px; background-color: #f8f9fa; border-radius: 10px;">
+    <h2 style="text-align: center; color: #2196F3; margin-bottom: 30px;">How It Works: Step by Step Guide</h2>
+    
+    <div style="display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 20px;">
+        <div style="text-align: center; flex: 1; min-width: 250px; max-width: 300px;">
+            <img src="data:image/png;base64,{example_img1}" 
+                 style="width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <h3 style="color: #333; margin: 15px 0;">Step 1: Original Image</h3>
+            <p style="color: #666;">Upload your original image containing the object you want to extract.</p>
+        </div>
+        
+        <div style="text-align: center; flex: 1; min-width: 250px; max-width: 300px;">
+            <img src="data:image/png;base64,{example_img2}" 
+                 style="width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <h3 style="color: #333; margin: 15px 0;">Step 2: Object Extraction</h3>
+            <p style="color: #666;">AI automatically detects and extracts the specified object.</p>
+        </div>
+        
+        <div style="text-align: center; flex: 1; min-width: 250px; max-width: 300px;">
+            <img src="data:image/png;base64,{example_img3}" 
+                 style="width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <h3 style="color: #333; margin: 15px 0;">Step 3: Final Result</h3>
+            <p style="color: #666;">The extracted object is placed on an AI-generated background.</p>
+        </div>
+    </div>
+
+    <div style="margin-top: 30px; text-align: center; padding: 20px; background-color: #e3f2fd; border-radius: 8px;">
+        <h4 style="color: #1976D2; margin-bottom: 10px;">Key Features:</h4>
+        <ul style="list-style: none; padding: 0;">
+            <li style="margin: 5px 0;">✨ Advanced AI-powered object detection and extraction</li>
+            <li style="margin: 5px 0;">🎨 Custom background generation with text prompts</li>
+            <li style="margin: 5px 0;">🔄 Flexible object positioning and sizing options</li>
+            <li style="margin: 5px 0;">📐 Multiple aspect ratio support for various use cases</li>
+        </ul>
+    </div>
+</div>
+"""
 
+    
 # UI 구성
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     gr.HTML("""
@@ -505,46 +549,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         </div>
     """)
 
-
-    
-    # 예제 설명 섹션 추가
-    gr.HTML("""
-        <div style="margin-top: 50px; padding: 20px; background-color: #f8f9fa; border-radius: 10px;">
-            <h2 style="text-align: center; color: #2196F3; margin-bottom: 30px;">How It Works: Step by Step Example</h2>
-            
-            <div style="display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 20px;">
-                <div style="text-align: center; flex: 1; min-width: 250px; max-width: 300px;">
-                    <img src="file/aa1.png" style="width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-                    <h3 style="color: #333; margin: 15px 0;">Step 1: Original Image</h3>
-                    <p style="color: #666;">Upload your original image that contains the object you want to extract.</p>
-                </div>
-                
-                <div style="text-align: center; flex: 1; min-width: 250px; max-width: 300px;">
-                    <img src="file/aa2.png" style="width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-                    <h3 style="color: #333; margin: 15px 0;">Step 2: Extracted Object</h3>
-                    <p style="color: #666;">Use prompts to identify and extract specific objects from your image.</p>
-                </div>
-                
-                <div style="text-align: center; flex: 1; min-width: 250px; max-width: 300px;">
-                    <img src="file/aa3.png" style="width: 100%; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-                    <h3 style="color: #333; margin: 15px 0;">Step 3: Final Result</h3>
-                    <p style="color: #666;">The extracted object is placed on an AI-generated background based on your description.</p>
-                </div>
-            </div>
-            
-            <div style="margin-top: 30px; text-align: center; padding: 20px; background-color: #e3f2fd; border-radius: 8px;">
-                <h4 style="color: #1976D2; margin-bottom: 10px;">Key Features:</h4>
-                <ul style="list-style: none; padding: 0;">
-                    <li style="margin: 5px 0;">✨ Precise object extraction using AI</li>
-                    <li style="margin: 5px 0;">🎨 Custom background generation</li>
-                    <li style="margin: 5px 0;">🔄 Flexible object positioning and sizing</li>
-                    <li style="margin: 5px 0;">📐 Multiple aspect ratio support</li>
-                </ul>
-            </div>
-        </div>
-    """)
-
-    # 나머지 기존 코드...
+    # 예제 섹션 추가
+    gr.HTML(example_html)
     
     with gr.Row():
         with gr.Column(scale=1):