🎨 Redesign from AnyCoder (#10)

- 🎨 Redesign from AnyCoder (c91e9325407f4aca82de3c75efe08065bab16204)

app.py

@@ -4,149 +4,290 @@ os.system("pip -qq install facenet_pytorch")
 from facenet_pytorch import MTCNN
 from torchvision import transforms
 import torch, PIL
-from tqdm.notebook import tqdm
 import gradio as gr
-import torch
 
+# Download models
 modelarcanev4 = hf_hub_download(repo_id="akhaliq/ArcaneGANv0.4", filename="ArcaneGANv0.4.jit")
 modelarcanev3 = hf_hub_download(repo_id="akhaliq/ArcaneGANv0.3", filename="ArcaneGANv0.3.jit")
 modelarcanev2 = hf_hub_download(repo_id="akhaliq/ArcaneGANv0.2", filename="ArcaneGANv0.2.jit")
 
-
 mtcnn = MTCNN(image_size=256, margin=80)
 
-# simplest ye olde trustworthy MTCNN for face detection with landmarks
+# Face detection
 def detect(img):
- 
-        # Detect faces
-        batch_boxes, batch_probs, batch_points = mtcnn.detect(img, landmarks=True)
-        # Select faces
-        if not mtcnn.keep_all:
-            batch_boxes, batch_probs, batch_points = mtcnn.select_boxes(
-                batch_boxes, batch_probs, batch_points, img, method=mtcnn.selection_method
-            )
- 
-        return batch_boxes, batch_points
+    batch_boxes, batch_probs, batch_points = mtcnn.detect(img, landmarks=True)
+    if not mtcnn.keep_all:
+        batch_boxes, batch_probs, batch_points = mtcnn.select_boxes(
+            batch_boxes, batch_probs, batch_points, img, method=mtcnn.selection_method
+        )
+    return batch_boxes, batch_points
 
-# my version of isOdd, should make a separate repo for it :D
 def makeEven(_x):
-  return _x if (_x % 2 == 0) else _x+1
+    return _x if (_x % 2 == 0) else _x+1
 
-# the actual scaler function
 def scale(boxes, _img, max_res=1_500_000, target_face=256, fixed_ratio=0, max_upscale=2, VERBOSE=False):
- 
     x, y = _img.size
- 
-    ratio = 2 #initial ratio
- 
-    #scale to desired face size
+    ratio = 2
+    
     if (boxes is not None):
-      if len(boxes)>0:
-        ratio = target_face/max(boxes[0][2:]-boxes[0][:2]); 
-        ratio = min(ratio, max_upscale)
-        if VERBOSE: print('up by', ratio)
-
+        if len(boxes)>0:
+            ratio = target_face/max(boxes[0][2:]-boxes[0][:2])
+            ratio = min(ratio, max_upscale)
+    
     if fixed_ratio>0:
-      if VERBOSE: print('fixed ratio')
-      ratio = fixed_ratio
- 
+        ratio = fixed_ratio
+    
     x*=ratio
     y*=ratio
- 
-    #downscale to fit into max res 
+    
     res = x*y
     if res > max_res:
-      ratio = pow(res/max_res,1/2); 
-      if VERBOSE: print(ratio)
-      x=int(x/ratio)
-      y=int(y/ratio)
- 
-    #make dimensions even, because usually NNs fail on uneven dimensions due skip connection size mismatch
+        ratio = pow(res/max_res,1/2)
+        x=int(x/ratio)
+        y=int(y/ratio)
+    
     x = makeEven(int(x))
     y = makeEven(int(y))
-    
     size = (x, y)
-
     return _img.resize(size)
 
-""" 
-    A useful scaler algorithm, based on face detection.
-    Takes PIL.Image, returns a uniformly scaled PIL.Image
-    boxes: a list of detected bboxes
-    _img: PIL.Image
-    max_res: maximum pixel area to fit into. Use to stay below the VRAM limits of your GPU.
-    target_face: desired face size. Upscale or downscale the whole image to fit the detected face into that dimension.
-    fixed_ratio: fixed scale. Ignores the face size, but doesn't ignore the max_res limit.
-    max_upscale: maximum upscale ratio. Prevents from scaling images with tiny faces to a blurry mess.
-"""
-
 def scale_by_face_size(_img, max_res=1_500_000, target_face=256, fix_ratio=0, max_upscale=2, VERBOSE=False):
     boxes = None
     boxes, _ = detect(_img)
-    if VERBOSE: print('boxes',boxes)
     img_resized = scale(boxes, _img, max_res, target_face, fix_ratio, max_upscale, VERBOSE)
     return img_resized
 
-
+# Image processing setup
 size = 256
-
 means = [0.485, 0.456, 0.406]
 stds = [0.229, 0.224, 0.225]
 
 t_stds = torch.tensor(stds).cuda().half()[:,None,None]
 t_means = torch.tensor(means).cuda().half()[:,None,None]
 
-def makeEven(_x):
-  return int(_x) if (_x % 2 == 0) else int(_x+1)
-
 img_transforms = transforms.Compose([                        
-            transforms.ToTensor(),
-            transforms.Normalize(means,stds)])
+    transforms.ToTensor(),
+    transforms.Normalize(means,stds)
+])
  
 def tensor2im(var):
-     return var.mul(t_stds).add(t_means).mul(255.).clamp(0,255).permute(1,2,0)
+    return var.mul(t_stds).add(t_means).mul(255.).clamp(0,255).permute(1,2,0)
 
 def proc_pil_img(input_image, model):
     transformed_image = img_transforms(input_image)[None,...].cuda().half()
-            
     with torch.no_grad():
         result_image = model(transformed_image)[0]
         output_image = tensor2im(result_image)
         output_image = output_image.detach().cpu().numpy().astype('uint8')
         output_image = PIL.Image.fromarray(output_image)
     return output_image
-    
-    
- 
+
+# Load models
 modelv4 = torch.jit.load(modelarcanev4).eval().cuda().half()
 modelv3 = torch.jit.load(modelarcanev3).eval().cuda().half()
 modelv2 = torch.jit.load(modelarcanev2).eval().cuda().half()
 
 def process(im, version):
-    if version == 'version 0.4':
+    if version == 'v0.4 (Recommended)':
         im = scale_by_face_size(im, target_face=256, max_res=1_500_000, max_upscale=1)
         res = proc_pil_img(im, modelv4)
-    elif version == 'version 0.3':
+    elif version == 'v0.3':
         im = scale_by_face_size(im, target_face=256, max_res=1_500_000, max_upscale=1)
         res = proc_pil_img(im, modelv3)
     else:
         im = scale_by_face_size(im, target_face=256, max_res=1_500_000, max_upscale=1)
         res = proc_pil_img(im, modelv2)
     return res
+
+# Custom theme
+custom_theme = gr.themes.Soft(
+    primary_hue="blue",
+    secondary_hue="indigo",
+    neutral_hue="slate",
+    font=gr.themes.GoogleFont("Inter"),
+    text_size="lg",
+    spacing_size="md",
+    radius_size="lg"
+).set(
+    button_primary_background_fill="*primary_600",
+    button_primary_background_fill_hover="*primary_700",
+    block_title_text_weight="600",
+    block_border_width="2px",
+    block_shadow="*shadow_drop_lg",
+)
+
+# Custom CSS for mobile-friendly design
+custom_css = """
+.gradio-container {
+    max-width: 1200px !important;
+    margin: auto !important;
+}
+
+#header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+#header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+
+#description {
+    font-size: 1.1rem;
+    color: #64748b;
+    margin-bottom: 1rem;
+}
+
+.input-column, .output-column {
+    border-radius: 16px;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
+}
+
+@media (max-width: 768px) {
+    #header h1 {
+        font-size: 2rem;
+    }
+    
+    #description {
+        font-size: 1rem;
+    }
+    
+    .input-column, .output-column {
+        padding: 1rem;
+    }
+}
+
+#footer {
+    text-align: center;
+    margin-top: 2rem;
+    padding: 1.5rem;
+    border-top: 2px solid #e2e8f0;
+}
+
+#footer a {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+#footer a:hover {
+    color: #764ba2;
+    text-decoration: underline;
+}
+
+.example-container {
+    margin-top: 1rem;
+}
+"""
+
+# Build the interface
+with gr.Blocks() as demo:
+    
+    # Header
+    with gr.Column(elem_id="header"):
+        gr.Markdown(
+            """
+            # 🎨 ArcaneGAN
+            ### Transform Your Photos into Arcane-Style Art
+            Upload a portrait and watch it transform into the stunning visual style of Netflix's Arcane series.
+            """
+        )
+        gr.Markdown(
+            "[Built with anycoder](https://huggingface.co/spaces/akhaliq/anycoder)",
+            elem_id="anycoder-link"
+        )
+    
+    # Main content
+    with gr.Row(equal_height=True):
+        # Input column
+        with gr.Column(scale=1, elem_classes="input-column"):
+            gr.Markdown("### 📤 Upload Your Photo")
+            input_image = gr.Image(
+                type="pil",
+                label="Input Image",
+                sources=["upload", "webcam", "clipboard"],
+                height=400
+            )
+            
+            version_selector = gr.Radio(
+                choices=['v0.4 (Recommended)', 'v0.3', 'v0.2'],
+                value='v0.4 (Recommended)',
+                label="Model Version",
+                info="v0.4 offers the best quality"
+            )
+            
+            transform_btn = gr.Button(
+                "✨ Transform to Arcane Style",
+                variant="primary",
+                size="lg"
+            )
         
-title = "ArcaneGAN"
-description = "Gradio demo for ArcaneGAN, portrait to Arcane style. To use it, simply upload your image, or click one of the examples to load them. Read more at the links below."
-article = "<div style='text-align: center;'>ArcaneGan by <a href='https://twitter.com/devdef' target='_blank'>Alexander S</a> | <a href='https://github.com/Sxela/ArcaneGAN' target='_blank'>Github Repo</a> | <center><img src='https://visitor-badge.glitch.me/badge?page_id=akhaliq_arcanegan' alt='visitor badge'></center></div>"
-
-gr.Interface(
-    process, 
-    [gr.inputs.Image(type="pil", label="Input"),gr.inputs.Radio(choices=['version 0.2','version 0.3','version 0.4'], type="value", default='version 0.4', label='version')
-], 
-    gr.outputs.Image(type="pil", label="Output"),
-    title=title,
-    description=description,
-    article=article,
-    examples=[['bill.png','version 0.3'],['keanu.png','version 0.4'],['will.jpeg','version 0.4']],
-    allow_flagging=False,
-    allow_screenshot=False
-    ).launch()
+        # Output column
+        with gr.Column(scale=1, elem_classes="output-column"):
+            gr.Markdown("### 🎭 Arcane-Style Result")
+            output_image = gr.Image(
+                type="pil",
+                label="Transformed Image",
+                height=400,
+                buttons=["download", "share"]
+            )
+    
+    # Examples
+    with gr.Row():
+        gr.Examples(
+            examples=[
+                ['bill.png', 'v0.3'],
+                ['keanu.png', 'v0.4 (Recommended)'],
+                ['will.jpeg', 'v0.4 (Recommended)']
+            ],
+            inputs=[input_image, version_selector],
+            outputs=output_image,
+            fn=process,
+            cache_examples=True,
+            label="Try These Examples",
+            examples_per_page=3
+        )
+    
+    # Footer
+    with gr.Column(elem_id="footer"):
+        gr.Markdown(
+            """
+            ---
+            **ArcaneGAN** by [Alexander S](https://twitter.com/devdef) | 
+            [GitHub Repository](https://github.com/Sxela/ArcaneGAN) | 
+            [Original Space](https://huggingface.co/spaces/akhaliq/ArcaneGAN)
+            
+            <div style='margin-top: 1rem;'>
+                <img src='https://visitor-badge.glitch.me/badge?page_id=akhaliq_arcanegan' alt='visitor badge'>
+            </div>
+            """
+        )
+    
+    # Event handlers
+    transform_btn.click(
+        fn=process,
+        inputs=[input_image, version_selector],
+        outputs=output_image,
+        api_name="transform"
+    )
+    
+    input_image.upload(
+        fn=process,
+        inputs=[input_image, version_selector],
+        outputs=output_image
+    )
+
+# Launch with Gradio 6 syntax
+demo.launch(
+    theme=custom_theme,
+    css=custom_css,
+    footer_links=[
+        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
+    ]
+)