UI

Author: STiFLeR7

ui/.vercelignore

@@ -0,0 +1,16 @@
+node_modules/
+.next/
+dist/
+build/
+.git/
+.github/
+.vscode/
+.idea/
+.env.local
+.env.*.local
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.DS_Store
+.env

ui/VERCEL_DEPLOYMENT.md

@@ -0,0 +1,57 @@
+# imgshape UI - Vercel Deployment
+
+## Environment Variables
+
+Set these in Vercel project settings:
+
+```
+VITE_API_BASE_URL=https://imgshape-947614788790.asia-south1.run.app
+```
+
+## Deploy Steps
+
+1. **Connect GitHub Repository**
+   - Go to [vercel.com](https://vercel.com)
+   - Click "Add New..." → "Project"
+   - Select your GitHub repo: `STiFLeR7/imgshape`
+   - Import the project
+
+2. **Configure Settings**
+   - Root Directory: `ui`
+   - Framework: `Vite`
+   - Build Command: `npm run build`
+   - Output Directory: `dist`
+
+3. **Add Environment Variable**
+   - In Vercel project settings → Environment Variables
+   - Add: `VITE_API_BASE_URL` = `https://imgshape-947614788790.asia-south1.run.app`
+
+4. **Deploy**
+   - Click "Deploy"
+   - Vercel will build and deploy automatically
+
+## Live URLs
+
+- **UI**: https://imgshape.vercel.app (or your custom domain)
+- **API**: https://imgshape-947614788790.asia-south1.run.app
+  - Health: `/health`
+  - Analyze v4: `/v4/analyze`
+  - Augment: `/augment`
+  - Report: `/generate_report`
+
+## Local Development
+
+```bash
+cd ui
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000)
+
+## Notes
+
+- UI is deployed on free Vercel tier
+- Backend API runs on Cloud Run (also cost-efficient)
+- Environment variable automatically passed to build
+- The API base URL can be overridden at build time

ui/vercel.json

@@ -0,0 +1,14 @@
+{
+  "name": "imgshape-ui",
+  "version": 2,
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
+  "framework": "vite",
+  "nodeVersion": "18.x",
+  "env": {
+    "VITE_API_BASE_URL": {
+      "default": "https://imgshape-947614788790.asia-south1.run.app",
+      "description": "Backend API base URL"
+    }
+  }
+}

ui/vite.config.ts

@@ -11,8 +11,8 @@ export default defineConfig(({ mode }) => {
       },
       plugins: [react()],
       define: {
-        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
-        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.VITE_API_BASE_URL': JSON.stringify(env.VITE_API_BASE_URL || 'http://localhost:8000')
       },
       resolve: {
         alias: {