fix rotation of selfies

client/package.json

@@ -25,6 +25,7 @@
     "lucide-react": "^0.446.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7",

client/src/app.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Download } from 'lucide-react';
+import { FiDownload } from 'react-icons/fi';
+import { PiImageSquare } from 'react-icons/pi';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { truncateFileName } from './lib/utils';
@@ -118,16 +119,16 @@ export function App() {
                     isMediaPipeReady ? 'bg-slate-600 hover:bg-slate-500' : 'bg-slate-500 cursor-not-allowed'
                   } focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 shadow-xl`}
                 >
-                  <Spinner />
-                  {imageFile ? truncateFileName(imageFile.name, 32) : (isMediaPipeReady ? 'Choose a portrait photo' : 'Initializing...')}
+                  <PiImageSquare className="w-6 h-6 mr-2" />
+                  {imageFile ? `Replace` : (isMediaPipeReady ? 'Choose a portrait photo' : 'Initializing...')}
                 </label>
               </div>
               {previewImage && (
                 <button
                   onClick={handleDownload}
                   className="inline-flex items-center px-3 h-10 border border-transparent text-sm font-medium rounded-md text-white bg-zinc-600 hover:bg-zinc-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-500 shadow-xl"
                 >
-                  <Download className="w-4 h-4 mr-2" />
+                  <FiDownload className="w-5 h-5 mr-2" />
                   Download
                 </button>
               )}

client/src/hooks/useMainStore.ts

@@ -432,5 +432,5 @@ export const useMainStore = create<ImageState>((set, get) => ({
       // console.error('Error modifying image:', error);
       setError('Failed to modify image');
     }
-  }
+  },
 }))

client/src/types.ts

@@ -38,7 +38,7 @@ export type OnServerResponseParams = {
   image?: Blob
   error?: string
   loaded?: {
-    i: string
+    u: string
   } & {
     c: number[] //center - 2x1
     s: number // size - scalar

engine.py

@@ -12,7 +12,7 @@
 import numpy as np
 import torch
 import torch.nn.functional as F
-from PIL import Image
+from PIL import Image, ImageOps
 
 from liveportrait.config.argument_config import ArgumentConfig
 from liveportrait.utils.camera import get_rotation_matrix
@@ -66,6 +66,9 @@ def __init__(self, live_portrait):
     async def load_image(self, data):
         image = Image.open(io.BytesIO(data))
 
+        # keep the exif orientation (fix the selfie issue on iphone)
+        image = ImageOps.exif_transpose(image)
+
         # Convert the image to RGB mode (removes alpha channel if present)
         image = image.convert('RGB')