From b5296e8a08d514ffdb487bc5d9b1a64ac58d8857 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 16 Feb 2026 08:18:06 +0000 Subject: [PATCH] Delete image-refine-vibe reference folder - Removed the `image-refine-vibe` directory as the redesign based on it has been successfully implemented and approved. --- image-refine-vibe/.gitignore | 24 ---- image-refine-vibe/App.tsx | 124 ---------------- image-refine-vibe/README.md | 19 --- image-refine-vibe/components/AnalyzeStage.tsx | 62 -------- image-refine-vibe/components/RefineStage.tsx | 135 ------------------ image-refine-vibe/components/SplitStage.tsx | 120 ---------------- image-refine-vibe/components/UploadStage.tsx | 94 ------------ image-refine-vibe/index.html | 76 ---------- image-refine-vibe/index.tsx | 15 -- image-refine-vibe/metadata.json | 5 - image-refine-vibe/package.json | 22 --- image-refine-vibe/tsconfig.json | 21 --- image-refine-vibe/types.ts | 13 -- image-refine-vibe/utils/imageProcessor.ts | 76 ---------- image-refine-vibe/vite.config.ts | 23 --- 15 files changed, 829 deletions(-) delete mode 100644 image-refine-vibe/.gitignore delete mode 100644 image-refine-vibe/App.tsx delete mode 100644 image-refine-vibe/README.md delete mode 100644 image-refine-vibe/components/AnalyzeStage.tsx delete mode 100644 image-refine-vibe/components/RefineStage.tsx delete mode 100644 image-refine-vibe/components/SplitStage.tsx delete mode 100644 image-refine-vibe/components/UploadStage.tsx delete mode 100644 image-refine-vibe/index.html delete mode 100644 image-refine-vibe/index.tsx delete mode 100644 image-refine-vibe/metadata.json delete mode 100644 image-refine-vibe/package.json delete mode 100644 image-refine-vibe/tsconfig.json delete mode 100644 image-refine-vibe/types.ts delete mode 100644 image-refine-vibe/utils/imageProcessor.ts delete mode 100644 image-refine-vibe/vite.config.ts diff --git a/image-refine-vibe/.gitignore b/image-refine-vibe/.gitignore deleted file mode 100644 index a547bf3..0000000 --- a/image-refine-vibe/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/image-refine-vibe/App.tsx b/image-refine-vibe/App.tsx deleted file mode 100644 index 1c051ad..0000000 --- a/image-refine-vibe/App.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React, { useState, useCallback } from 'react' -import { UploadStage } from './components/UploadStage' -import { AnalyzeStage } from './components/AnalyzeStage' -import { SplitStage } from './components/SplitStage' -import { RefineStage } from './components/RefineStage' -import { sliceImage } from './utils/imageProcessor' -import { AppStage, ImageSegment } from './types' - -const App: React.FC = () => { - const [stage, setStage] = useState('upload') - const [uploadedImage, setUploadedImage] = useState(null) - const [segments, setSegments] = useState([]) - - // 1. Handle Upload - const handleImageUpload = useCallback((imageDataUrl: string) => { - setUploadedImage(imageDataUrl) - setStage('analyze') - }, []) - - // 2. Handle Analysis Completion - const handleAnalysisComplete = useCallback(async () => { - if (!uploadedImage) return - - try { - // Slice image into 3x3 grid - const slicedImages = await sliceImage(uploadedImage, 3, 3) - - const newSegments: ImageSegment[] = slicedImages.map((src, index) => ({ - id: `seg-${index}`, - src, - selected: true, // Default all selected - status: 'pending', - })) - - setSegments(newSegments) - setStage('split') - } catch (error) { - console.error('Failed to slice image', error) - // Fallback or error handling could go here - } - }, [uploadedImage]) - - // 3. Handle Split Confirmation - const handleSplitConfirm = useCallback( - (selectedIds: string[]) => { - // Filter out unselected items for the refine view - const selectedSegments = segments.filter((seg) => selectedIds.includes(seg.id)) - setSegments(selectedSegments) - setStage('refine') - }, - [segments], - ) - - // 4. Reset - const handleReset = useCallback(() => { - setUploadedImage(null) - setSegments([]) - setStage('upload') - }, []) - - return ( -
- {/* Background Ambience */} -
-
-
-
- -
- {/* Navigation / Header (Minimal) */} -
-
-
- AI -
-

- RefineLab -

-
- - {/* Progress Steps */} - {stage !== 'upload' && ( -
-
- Analyze -
-
-
- Split -
-
-
- Refine -
-
- )} -
- - {/* Content Area */} -
- {stage === 'upload' && } - - {stage === 'analyze' && uploadedImage && ( - - )} - - {stage === 'split' && ( - - )} - - {stage === 'refine' && } -
-
-
- ) -} - -export default App diff --git a/image-refine-vibe/README.md b/image-refine-vibe/README.md deleted file mode 100644 index 59825b0..0000000 --- a/image-refine-vibe/README.md +++ /dev/null @@ -1,19 +0,0 @@ -
-GHBanner -
- -# Run and deploy your AI Studio app - -This contains everything you need to run your app locally. - -View your app in AI Studio: https://ai.studio/apps/drive/1P0JLZhnyDHgV03_9rLIzEixF3AY0-NQU - -## Run Locally - -**Prerequisites:** Node.js - -1. Install dependencies: - `npm install` -2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key -3. Run the app: - `npm run dev` diff --git a/image-refine-vibe/components/AnalyzeStage.tsx b/image-refine-vibe/components/AnalyzeStage.tsx deleted file mode 100644 index b9ba34e..0000000 --- a/image-refine-vibe/components/AnalyzeStage.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useEffect } from 'react' -import { Scan, BrainCircuit } from 'lucide-react' - -interface AnalyzeStageProps { - imageSrc: string - onAnalysisComplete: () => void -} - -export const AnalyzeStage: React.FC = ({ imageSrc, onAnalysisComplete }) => { - useEffect(() => { - const timer = setTimeout(() => { - onAnalysisComplete() - }, 5000) - - return () => clearTimeout(timer) - }, [onAnalysisComplete]) - - return ( -
- {/* Background Frosted Glass Layer */} -
- - {/* Main Container */} -
- {/* Image Container with Scanning Effect */} -
- Analyzing - - {/* Scan Line Animation */} -
- - {/* Grid Overlay Effect (Subtle) */} -
- - {/* Corner Brackets UI */} -
-
-
-
-
- - {/* Status Text */} -
- - Analyzing Structure... -
-
-
-
-
-
-
-
- ) -} diff --git a/image-refine-vibe/components/RefineStage.tsx b/image-refine-vibe/components/RefineStage.tsx deleted file mode 100644 index f80620a..0000000 --- a/image-refine-vibe/components/RefineStage.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react' -import { ImageSegment } from '../types' -import { Loader2, CheckCircle2, Sparkles, RefreshCw } from 'lucide-react' - -interface RefineStageProps { - initialSegments: ImageSegment[] - onDone: () => void -} - -export const RefineStage: React.FC = ({ initialSegments, onDone }) => { - const [segments, setSegments] = useState(initialSegments) - const [processingIndex, setProcessingIndex] = useState(0) - const [isAllDone, setIsAllDone] = useState(false) - const processingRef = useRef(false) - - useEffect(() => { - // We only process segments that were selected - const selectedSegments = segments.filter((s) => s.selected) - - if (processingIndex >= selectedSegments.length) { - setIsAllDone(true) - return - } - - if (processingRef.current) return - processingRef.current = true - - const currentSegmentId = selectedSegments[processingIndex].id - - // Set current to processing - setSegments((prev) => - prev.map((s) => (s.id === currentSegmentId ? { ...s, status: 'processing' } : s)), - ) - - const processTimer = setTimeout(() => { - // Mark as completed and move next - setSegments((prev) => - prev.map((s) => (s.id === currentSegmentId ? { ...s, status: 'completed' } : s)), - ) - - setProcessingIndex((prev) => prev + 1) - processingRef.current = false - }, 2000) - - return () => clearTimeout(processTimer) - }, [processingIndex, segments]) - - return ( -
- {/* Header */} -
-
-

- - Refining Images -

-

- {isAllDone - ? 'All selected segments have been processed successfully.' - : `Processing item ${processingIndex + 1} of ${segments.length}...`} -

-
- {isAllDone && ( - - )} -
- - {/* Grid */} -
-
- {segments.map((seg) => ( -
- segment - - {/* Overlay states */} -
- {seg.status === 'pending' && ( -
- Pending -
- )} - - {seg.status === 'processing' && ( -
-
-
-
- -
-
- - Refining... - -
- )} - - {seg.status === 'completed' && ( -
- {/* Clean view for completed, just a subtle indicator */} -
- -
-
- )} -
- - {/* Scanning effect for processing item only */} - {seg.status === 'processing' && ( -
- )} -
- ))} -
-
-
- ) -} diff --git a/image-refine-vibe/components/SplitStage.tsx b/image-refine-vibe/components/SplitStage.tsx deleted file mode 100644 index 2459752..0000000 --- a/image-refine-vibe/components/SplitStage.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import React, { useState } from 'react' -import { ImageSegment } from '../types' -import { Check, Grid2X2, ArrowRight } from 'lucide-react' - -interface SplitStageProps { - segments: ImageSegment[] - onConfirm: (selectedIds: string[]) => void - onBack: () => void -} - -export const SplitStage: React.FC = ({ segments, onConfirm, onBack }) => { - const [localSegments, setLocalSegments] = useState(segments) - - const toggleSelection = (id: string) => { - setLocalSegments((prev) => - prev.map((seg) => (seg.id === id ? { ...seg, selected: !seg.selected } : seg)), - ) - } - - const selectedCount = localSegments.filter((s) => s.selected).length - - const handleConfirm = () => { - if (selectedCount === 0) return - const selectedIds = localSegments.filter((s) => s.selected).map((s) => s.id) - onConfirm(selectedIds) - } - - return ( -
- {/* Header */} -
-
-

- - Select Segments -

-

- Unselect any areas you wish to exclude from processing. -

-
-
- {selectedCount} - Selected -
-
- - {/* Grid */} -
-
- {localSegments.map((seg) => ( -
toggleSelection(seg.id)} - className={` - group relative aspect-square rounded-xl overflow-hidden cursor-pointer transition-all duration-300 - border-2 - ${ - seg.selected - ? 'border-sky-500 shadow-lg shadow-sky-500/20 scale-[1.01]' - : 'border-slate-700 opacity-60 hover:opacity-100 hover:border-slate-500' - } - `} - > - segment - - {/* Selection Overlay */} -
- - {/* Checkbox Indicator */} -
- -
-
- ))} -
-
- - {/* Footer Actions */} -
-
- - -
-
-
- ) -} diff --git a/image-refine-vibe/components/UploadStage.tsx b/image-refine-vibe/components/UploadStage.tsx deleted file mode 100644 index 2a0c71b..0000000 --- a/image-refine-vibe/components/UploadStage.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React, { useCallback, useState } from 'react' -import { Upload, Image as ImageIcon } from 'lucide-react' -import { readFileAsDataURL } from '../utils/imageProcessor' - -interface UploadStageProps { - onImageUpload: (imageDataUrl: string) => void -} - -export const UploadStage: React.FC = ({ onImageUpload }) => { - const [isDragging, setIsDragging] = useState(false) - - const handleDragOver = useCallback((e: React.DragEvent) => { - e.preventDefault() - setIsDragging(true) - }, []) - - const handleDragLeave = useCallback((e: React.DragEvent) => { - e.preventDefault() - setIsDragging(false) - }, []) - - const handleDrop = useCallback( - async (e: React.DragEvent) => { - e.preventDefault() - setIsDragging(false) - - if (e.dataTransfer.files && e.dataTransfer.files[0]) { - const file = e.dataTransfer.files[0] - if (file.type.startsWith('image/')) { - try { - const dataUrl = await readFileAsDataURL(file) - onImageUpload(dataUrl) - } catch (error) { - console.error('Error reading file:', error) - } - } - } - }, - [onImageUpload], - ) - - const handleFileChange = useCallback( - async (e: React.ChangeEvent) => { - if (e.target.files && e.target.files[0]) { - try { - const dataUrl = await readFileAsDataURL(e.target.files[0]) - onImageUpload(dataUrl) - } catch (error) { - console.error('Error reading file:', error) - } - } - }, - [onImageUpload], - ) - - return ( -
-
-
-
- -
-
-

Upload an Image

-

- Drag and drop your image here, or click to browse files -

-
- -
-
-

Supports JPG, PNG, WEBP up to 10MB

-
- ) -} diff --git a/image-refine-vibe/index.html b/image-refine-vibe/index.html deleted file mode 100644 index f16903e..0000000 --- a/image-refine-vibe/index.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - Image Refine Tool - - - - - - -
- - - diff --git a/image-refine-vibe/index.tsx b/image-refine-vibe/index.tsx deleted file mode 100644 index ed2c62f..0000000 --- a/image-refine-vibe/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' - -const rootElement = document.getElementById('root') -if (!rootElement) { - throw new Error('Could not find root element to mount to') -} - -const root = ReactDOM.createRoot(rootElement) -root.render( - - - , -) diff --git a/image-refine-vibe/metadata.json b/image-refine-vibe/metadata.json deleted file mode 100644 index 1e4996d..0000000 --- a/image-refine-vibe/metadata.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Image Split & Refine Tool", - "description": "A sophisticated image processing tool that analyzes, splits, and refines images with a modern frosted glass UI.", - "requestFramePermissions": [] -} diff --git a/image-refine-vibe/package.json b/image-refine-vibe/package.json deleted file mode 100644 index fe85e3d..0000000 --- a/image-refine-vibe/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "image-split-&-refine-tool", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "react": "^19.2.4", - "lucide-react": "^0.564.0", - "react-dom": "^19.2.4" - }, - "devDependencies": { - "@types/node": "^22.14.0", - "@vitejs/plugin-react": "^5.0.0", - "typescript": "~5.8.2", - "vite": "^6.2.0" - } -} diff --git a/image-refine-vibe/tsconfig.json b/image-refine-vibe/tsconfig.json deleted file mode 100644 index f9d60ed..0000000 --- a/image-refine-vibe/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2022", - "experimentalDecorators": true, - "useDefineForClassFields": false, - "module": "ESNext", - "lib": ["ES2022", "DOM", "DOM.Iterable"], - "skipLibCheck": true, - "types": ["node"], - "moduleResolution": "bundler", - "isolatedModules": true, - "moduleDetection": "force", - "allowJs": true, - "jsx": "react-jsx", - "paths": { - "@/*": ["./*"] - }, - "allowImportingTsExtensions": true, - "noEmit": true - } -} diff --git a/image-refine-vibe/types.ts b/image-refine-vibe/types.ts deleted file mode 100644 index 6e1a92e..0000000 --- a/image-refine-vibe/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -export type AppStage = 'upload' | 'analyze' | 'split' | 'refine' | 'completed' - -export interface ImageSegment { - id: string - src: string - selected: boolean - status: 'pending' | 'processing' | 'completed' -} - -export interface ProcessingState { - isProcessing: boolean - currentId: string | null -} diff --git a/image-refine-vibe/utils/imageProcessor.ts b/image-refine-vibe/utils/imageProcessor.ts deleted file mode 100644 index d6159ab..0000000 --- a/image-refine-vibe/utils/imageProcessor.ts +++ /dev/null @@ -1,76 +0,0 @@ -/** - * Slices an image into a grid of smaller images. - * @param imageSrc The source image data URL. - * @param rows Number of rows. - * @param cols Number of columns. - * @returns A promise resolving to an array of data URLs for the segments. - */ -export const sliceImage = ( - imageSrc: string, - rows: number = 3, - cols: number = 3, -): Promise => { - return new Promise((resolve, reject) => { - const img = new Image() - img.crossOrigin = 'Anonymous' - img.onload = () => { - const segments: string[] = [] - const segmentWidth = Math.floor(img.width / cols) - const segmentHeight = Math.floor(img.height / rows) - - const canvas = document.createElement('canvas') - const ctx = canvas.getContext('2d') - - if (!ctx) { - reject(new Error('Could not get canvas context')) - return - } - - canvas.width = segmentWidth - canvas.height = segmentHeight - - for (let y = 0; y < rows; y++) { - for (let x = 0; x < cols; x++) { - // Clear canvas for next segment - ctx.clearRect(0, 0, segmentWidth, segmentHeight) - - // Draw the specific slice - ctx.drawImage( - img, - x * segmentWidth, - y * segmentHeight, - segmentWidth, - segmentHeight, - 0, - 0, - segmentWidth, - segmentHeight, - ) - - segments.push(canvas.toDataURL('image/png')) - } - } - resolve(segments) - } - img.onerror = (err) => reject(err) - img.src = imageSrc - }) -} - -/** - * Reads a file input as a Data URL. - */ -export const readFileAsDataURL = (file: File): Promise => { - return new Promise((resolve, reject) => { - const reader = new FileReader() - reader.onload = (e) => { - if (e.target?.result) { - resolve(e.target.result as string) - } else { - reject(new Error('Failed to read file')) - } - } - reader.onerror = reject - reader.readAsDataURL(file) - }) -} diff --git a/image-refine-vibe/vite.config.ts b/image-refine-vibe/vite.config.ts deleted file mode 100644 index 11827f5..0000000 --- a/image-refine-vibe/vite.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -import path from 'path' -import { defineConfig, loadEnv } from 'vite' -import react from '@vitejs/plugin-react' - -export default defineConfig(({ mode }) => { - const env = loadEnv(mode, '.', '') - return { - server: { - port: 3000, - host: '0.0.0.0', - }, - plugins: [react()], - define: { - 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), - 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY), - }, - resolve: { - alias: { - '@': path.resolve(__dirname, '.'), - }, - }, - } -})