[V0_FILE]typescriptreact:file="components/processing-steps.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Brush, Image, CuboidIcon as Cube } from "lucide-react" import { useLanguage } from "@/contexts/language-context" export default function ProcessingSteps() { const { t } = useLanguage() const steps = [ { icon: , title: t("how.step1.title"), description: t("how.step1.desc"), }, { icon: , title: t("how.step2.title"), description: t("how.step2.desc"), }, { icon: , title: t("how.step3.title"), description: t("how.step3.desc"), }, ] return (

{t("how.title")}

{steps.map((step, index) => (

{index === 0 ? "✏️" : index === 1 ? "🖼️" : "🧊"}

{step.icon}

{step.title}

{step.description}

{index < steps.length - 1 && (

)} ))}

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" isMerged="true" import { Zap, Shield, Smartphone, Eye, RotateCw, Download } from "lucide-react" export default function FeaturesSection() { const features = [ { icon: , title: "Fast Processing", description: "Advanced AI models optimized for speed with cloud-based GPUs.", }, { icon: , title: "Secure & Private", description: "Your sketches and generated content are processed securely.", }, { icon: , title: "Responsive Design", description: "Works seamlessly on desktop, tablet, and mobile devices.", }, { icon: , title: "High Quality Results", description: "Photorealistic images and detailed 3D models with fine details.", }, { icon: , title: "Interactive 3D", description: "Rotate, zoom, and inspect your 3D models from any angle.", }, { icon: , title: "Easy Export", description: "Download your images and 3D models in various formats.", }, ] return (

Key Features

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/tutorial-section.tsx" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { PencilRuler, Upload, Settings, Download, HelpCircle } from "lucide-react" export default function TutorialSection() { const [activeTab, setActiveTab] = useState("basics") const tutorials = { basics: [ { title: "Creating Effective Sketches", icon: , description: "Learn how to create sketches that work best with our AI system. Clear lines and good contrast will yield the best results.", }, { title: "Uploading Your Sketch", icon: , description: "Drag and drop your sketch or use the file browser. We accept PNG, JPG, and JPEG formats up to 5MB.", }, { title: "Adjusting Settings", icon: , description: "Fine-tune the AI processing parameters to get the exact style and detail level you want.", }, { title: "Downloading Results", icon: , description: "Save your generated images and 3D models in various formats for use in other applications.", }, ], advanced: [ { title: "Understanding the AI Process", icon: , description: "Dive deeper into how our AI transforms sketches into realistic images using deep learning models.", }, { title: "3D Model Manipulation", icon: , description: "Learn advanced techniques for interacting with and modifying your 3D models.", }, { title: "Optimizing Your Sketches", icon: , description: "Advanced tips for preparing sketches that will generate the most detailed and accurate results.", }, { title: "Batch Processing", icon: , description: "Process multiple sketches at once to create collections of related images and models.", }, ], tips: [ { title: "Use Clear Outlines", icon: , description: "Sketches with clear, defined outlines work best with our AI system.", }, { title: "Add Shading Hints", icon: , description: "Simple shading in your sketch helps the AI understand depth and form.", }, { title: "Include Details", icon: , description: "The more details in your sketch, the more realistic the final image and 3D model will be.", }, { title: "Experiment with Styles", icon: , description: "Try different sketch styles to see how they affect the AI-generated results.", }, ], } return (

How to Use Our Platform

Basics Advanced Tips & Tricks {Object.entries(tutorials).map(([key, items]) => (

{items.map((item, index) => (

{item.icon}

{item.title}

{item.description} ))}

))}

) } [V0_FILE]typescriptreact:file="components/language-switcher.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Globe } from "lucide-react" import { useLanguage, languages, type LanguageCode } from "@/contexts/language-context" export default function LanguageSwitcher() { const { currentLanguage, changeLanguage } = useLanguage() return ( {Object.values(languages).map((language) => ( changeLanguage(language.code as LanguageCode)} className={currentLanguage.code === language.code ? "bg-accent" : ""} > {language.nativeName} {language.code ? language.code.toUpperCase() : ""} ))} ) } [V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true" isMerged="true" "use client" import { cn } from "@/lib/utils" import { motion } from "framer-motion" import { Scale, Gavel } from "lucide-react" interface LogoProps { className?: string size?: "sm" | "md" | "lg" animated?: boolean } export default function Logo({ className, size = "md", animated = true }: LogoProps) { const sizes = { sm: { width: 32, height: 32, fontSize: "text-xs", titleSize: "text-base" }, md: { width: 48, height: 48, fontSize: "text-sm", titleSize: "text-xl" }, lg: { width: 64, height: 64, fontSize: "text-base", titleSize: "text-2xl" }, } const logoWidth = sizes[size].width const logoHeight = sizes[size].height const fontSize = sizes[size].fontSize const titleSize = sizes[size].titleSize return (

{animated ? (

) : null}

{/* Decorative elements */}

Judicial 3D Sketch to Reality

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Link from "next/link" import { Button } from "@/components/ui/button" import { useLanguage } from "@/contexts/language-context" import { ChevronRight, Scale, Gavel, FileText } from "lucide-react" import Logo from "./logo" export default function HeroSection() { const { t } = useLanguage() // Animation variants const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } const staggerContainer = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } return (

{/* Background with judicial theme */}

{/* Floating elements */}

{t("hero.title").split(" ").slice(0, 1).join(" ")}{" "} {t("hero.title").split(" ").slice(1).join(" ")} {t("hero.subtitle")} {/* Scroll indicator */}

) } [V0_FILE]plaintext:file="public/logo.png" https="true" hebbkx1anhila5yf="true" public="true" blob="true" vercel="true" storage="true" com="true" judicial="true" logo="true" Yd9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij="true" v0="true" no="true" op="true" code="true" block="true" terminated="true" isMerged="true" [V0_FILE]typescriptreact:file="components/accessibility-menu.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Accessibility, ZoomIn, ZoomOut, Sun, Moon } from "lucide-react" import { useTheme } from "next-themes" export default function AccessibilityMenu() { const [mounted, setMounted] = useState(false) const [fontSize, setFontSize] = useState(16) const { setTheme, theme } = useTheme() const [highContrast, setHighContrast] = useState(false) // After mounting, we can safely access the window object useEffect(() => { setMounted(true) // Get the stored font size or use default const storedFontSize = localStorage.getItem("fontSize") if (storedFontSize) { setFontSize(Number.parseInt(storedFontSize)) document.documentElement.style.fontSize = `${storedFontSize}px` } // Get the stored high contrast setting const storedHighContrast = localStorage.getItem("highContrast") if (storedHighContrast === "true") { setHighContrast(true) document.documentElement.classList.add("high-contrast") } }, []) const increaseFontSize = () => { const newSize = Math.min(fontSize + 2, 24) setFontSize(newSize) document.documentElement.style.fontSize = `${newSize}px` localStorage.setItem("fontSize", newSize.toString()) } const decreaseFontSize = () => { const newSize = Math.max(fontSize - 2, 12) setFontSize(newSize) document.documentElement.style.fontSize = `${newSize}px` localStorage.setItem("fontSize", newSize.toString()) } const resetFontSize = () => { setFontSize(16) document.documentElement.style.fontSize = "16px" localStorage.setItem("fontSize", "16") } const toggleHighContrast = () => { setHighContrast(!highContrast) if (!highContrast) { document.documentElement.classList.add("high-contrast") localStorage.setItem("highContrast", "true") } else { document.documentElement.classList.remove("high-contrast") localStorage.setItem("highContrast", "false") } } if (!mounted) { return null } return ( Accessibility { setTheme("light") localStorage.setItem("theme", "light") document.documentElement.classList.remove("dark") }} > Light Mode { setTheme("dark") localStorage.setItem("theme", "dark") document.documentElement.classList.add("dark") }} > Dark Mode 🔳 {highContrast ? "Disable" : "Enable"} High Contrast Increase Font Size Decrease Font Size ↩️ Reset Font Size ) } [V0_FILE]typescriptreact:file="deployment-guide.md" isMerged="true" # Deployment Guide for Sketch to 3D ## Deployment Options You can deploy your static HTML site using several methods: ### 1. Vercel (Recommended) Vercel is ideal for static sites and offers a generous free tier: 1. Create a GitHub repository with your HTML files 2. Sign up at [vercel.com](https://vercel.com) 3. Import your GitHub repository 4. Vercel will automatically detect and deploy your static site ### 2. GitHub Pages Free and easy for static sites: 1. Create a GitHub repository 2. Push your HTML files to the repository 3. Go to Settings > Pages 4. Select the branch to deploy (usually "main") 5. Your site will be available at `https://yourusername.github.io/repositoryname` ### 3. Netlify Also excellent for static sites: 1. Create a GitHub repository with your HTML files 2. Sign up at [netlify.com](https://netlify.com) 3. Import your GitHub repository 4. Netlify will automatically deploy your site ## Common Deployment Issues and Solutions ### 1. File Path Issues **Problem**: Relative paths might not work correctly when deployed. **Solution**: Make sure all file paths are correct: - Use relative paths starting with `/` for root-level resources - Update the following in your HTML files: - Change `href="login.html"` to `href="/login.html"` - Change `href="signup.html"` to `href="/signup.html"` - Change `href="index.html"` to `href="/index.html"` or `href="/"` ### 2. Missing Assets **Problem**: Images or other assets might not be found. **Solution**: - Create a `/public` or `/assets` folder for all images and resources - Update paths to reference these folders correctly - For placeholder images, consider using a service like [placeholder.com](https://placeholder.com) ### 3. CORS Issues **Problem**: If you're fetching resources from other domains, you might encounter CORS errors. **Solution**: - Host all resources on the same domain when possible - For external resources, make sure they allow CORS access - Consider using a CORS proxy for development ### 4. JavaScript Compatibility **Problem**: Some JavaScript features might not work in older browsers. **Solution**: - Consider adding a polyfill for older browsers - Test in multiple browsers before deployment - Use feature detection rather than browser detection ## Pre-Deployment Checklist Before deploying, ensure: 1. ✅ All links between pages work correctly 2. ✅ All JavaScript functionality works (dark mode, high contrast, language switching) 3. ✅ File upload functionality works properly 4. ✅ All forms validate correctly 5. ✅ The site is responsive on different screen sizes 6. ✅ All accessibility features work as expected ## Post-Deployment Verification After deploying, verify: 1. Visit all pages to ensure they load correctly 2. Test all interactive features (language switching, dark mode, high contrast) 3. Test the file upload functionality 4. Verify form submissions work correctly 5. Check console for any JavaScript errors 6. Test on multiple devices and browsers ## Troubleshooting Deployment Issues If you encounter issues after deployment: 1. Check the browser console for errors 2. Verify all file paths are correct for the deployed environment 3. Ensure all required assets are properly uploaded 4. Check if JavaScript is enabled and working 5. Verify that localStorage is available and working [V0_FILE]typescriptreact:file="index.html" isEdit="true" isQuickEdit="true" isMerged="true" Judicial Sketch to 3D - AI-Powered Sketch Transformation

Judicial 3D Sketch to Reality

Transform Sketches into Realistic 3D Models

Using advanced AI and computer vision to convert your simple sketches into stunning realistic images and interactive 3D models for judicial purposes.

Try It Now Learn How It Works

How It Works

✏️

Upload Sketch

Upload your hand-drawn or digital sketch to our platform.

🖼️

AI Image Generation

Our AI transforms your sketch into a photorealistic image using advanced deep learning.

🧊

3D Model Creation

The realistic image is converted into an interactive 3D model you can view from any angle.

Transform Your Sketches

Drag and drop your sketch here or

PNG, JPG, JPEG up to 5MB

Privacy Note: Your sketches are processed securely and not stored permanently.

Your generated image will appear here

Upload a sketch to get started

Key Features

Fast Processing

Advanced AI models optimized for speed with cloud-based GPUs.

Secure & Private

Your sketches and generated content are processed securely.

Responsive Design

Works seamlessly on desktop, tablet, and mobile devices.

High Quality Results

Photorealistic images and detailed 3D models with fine details.

Interactive 3D

Rotate, zoom, and inspect your 3D models from any angle.

Easy Export

Download your images and 3D models in various formats.

Key Features

Fast Processing

Advanced AI models optimized for speed with cloud-based GPUs.

Secure & Private

Your sketches and generated content are processed securely.

Responsive Design

Works seamlessly on desktop, tablet, and mobile devices.

High Quality Results

Photorealistic images and detailed 3D models with fine details.

Interactive 3D

Rotate, zoom, and inspect your 3D models from any angle.

Easy Export

Download your images and 3D models in various formats.

[V0_FILE]typescriptreact:file="login.html" isEdit="true" isQuickEdit="true" isMerged="true" Login - Judicial Sketch to 3D

Back to Home

Welcome back

Or continue with

[V0_FILE]typescriptreact:file="signup.html" isEdit="true" isQuickEdit="true" isMerged="true" Sign Up - Judicial Sketch to 3D

Back to Home

Create an account

Full Name

Password

Confirm Password

I agree to the terms of service and privacy policy

You must agree to our terms to create an account.

Already have an account? Sign in

Or continue with

[V0_FILE]typescriptreact:file="debug-guide.md" isMerged="true" # Debugging Guide for Sketch to 3D ## Fixed Issues ### 1. Arabic Language Switching Not Working Locally **Problem:** The language switching to Arabic wasn't working properly when running the site locally. **Solution:** - Added page reload after language change to ensure all elements update correctly - Improved the RTL adjustment function to handle class-based margin changes more robustly - Added console logging to help debug RTL adjustments - Ensured language settings are applied consistently across all pages ### 2. High Contrast Mode Not Working Locally **Problem:** High contrast mode wasn't being applied correctly when running locally. **Solution:** - Added explicit initialization of high contrast mode on page load - Improved the high contrast toggle functionality - Ensured high contrast settings are applied early in the page load process - Added consistent high contrast handling across all pages ## How to Test the Fixes 1. **Language Switching:** - Click the language switcher icon in the header - Select "العربية" (Arabic) - The page should reload and display in RTL mode - Text direction and margins should adjust accordingly - Switching back to English should restore LTR layout 2. **High Contrast Mode:** - Click the accessibility icon in the header - Select "Enable High Contrast" - The page should immediately switch to high contrast mode - Colors should change to provide higher contrast - Toggling it off should restore normal colors ## Additional Debugging Tips If you encounter further issues: 1. **Check Browser Console:** - Open your browser's developer tools (F12 or right-click > Inspect) - Look for any JavaScript errors in the Console tab - The improved code adds console logging for RTL adjustments 2. **Inspect localStorage:** - In developer tools, go to Application > Storage > Local Storage - Verify that the following keys are being set correctly: - `language` (should be "en" or "ar") - `highContrast` (should be "true" or "false") - `theme` (should be "light" or "dark") 3. **Clear Cache and Storage:** - If issues persist, try clearing your browser cache and localStorage - In developer tools: Application > Storage > Clear Site Data - Then refresh the page and test again 4. **Cross-Browser Testing:** - Test in multiple browsers (Chrome, Firefox, Safari, Edge) - Different browsers may handle localStorage and CSS differently ## Deployment Recommendations When deploying to production: 1. **Use a CDN for Static Assets:** - Consider using a CDN for faster loading of static assets - Update image paths to use absolute URLs or CDN paths 2. **Enable CORS if Needed:** - If fetching resources from different domains, ensure CORS is properly configured 3. **Test on Multiple Devices:** - Test the site on desktop, tablet, and mobile devices - Ensure responsive design works correctly across all screen sizes 4. **Accessibility Testing:** - Use tools like Lighthouse or axe to test accessibility compliance - Ensure high contrast mode meets WCAG guidelines [V0_FILE]html:file="team.html" isFixed="true" isEdit="true" isQuickEdit="true" isTerminated="true" isMerged="true" Our Team - Judicial Sketch to 3D

Judicial 3D Sketch to Reality

Meet Our Amazing Team

The talented individuals behind Judicial Sketch-to-3D who are revolutionizing the way sketches are transformed into realistic 3D models.

Our Process

Sketch Creation

Our team creates detailed judicial sketches with precision and accuracy.

AI Processing

Our advanced AI transforms sketches into photorealistic images.

3D Modeling

We convert 2D images into detailed, interactive 3D models.

Interactive 3D Model Demo

Project Supervisor

Mohammed Shreif Elkasass

Project Supervisor

Guiding the team with expertise in computer vision and 3D modeling technologies, ensuring the project meets the highest standards of quality and innovation.

Team Members

Momen Tarek

Team Leader & Web Designer

Leading the team and designing the web interface to ensure a seamless user experience.

Yousef Saad

Desktop Designer

Creating intuitive desktop interfaces that enhance user productivity and experience.

Ezzat Yehia

Dataset Sketch Engineer

Managing and optimizing sketch datasets to improve AI model training and accuracy.

Momena Asem

Model Sketch Engineer

Developing advanced algorithms for sketch recognition and processing.

Habeba Abdelbakey

Dataset 3D Engineer

Curating and managing 3D model datasets to enhance the AI's learning capabilities.

Esraa Akel

Model 3D Engineer

Specializing in creating high-quality 3D models from 2D images with exceptional detail.

{children}

{step.title}

Key Features

{feature.title}

How to Use Our Platform

Transform Sketches into Realistic 3D Models

How It Works

Upload Sketch

AI Image Generation

3D Model Creation

Transform Your Sketches

Preview

Key Features

Fast Processing

Secure & Private

Responsive Design

High Quality Results

Interactive 3D

Easy Export

Key Features

Fast Processing

Secure & Private

Responsive Design

High Quality Results

Interactive 3D

Easy Export

Welcome back

Create an account

Meet Our Amazing Team

Our Process

Sketch Creation

AI Processing

3D Modeling

Interactive 3D Model Demo

Project Supervisor

Mohammed Shreif Elkasass

Team Members

Momen Tarek

Yousef Saad

Ezzat Yehia

Momena Asem

Habeba Abdelbakey

Esraa Akel

{t("steps.upload")}

{t("steps.generate")}

{t("steps.model")}

{t("features.fast")}

{t("features.secure")}

{t("features.responsive")}

{t("features.quality")}

{t("features.interactive")}

{t("features.export")}

{t("team.title")}

{supervisor.name}

{member.name}

{t("upload.preview")}

Project Details

The Science Behind Sketch to 3D

{dataset.name}

{model.name}

{step.title}

Neural Network Pipeline

Ready to Try It Yourself?

Project Details

The Science Behind Sketch to 3D

CUHK Face Sketch Database (CUFS)

TU-Berlin Sketch Dataset

Sketchy Database

QuickDraw Dataset

pix2pix

CycleGAN

Deep Image Analogy

SketchyGAN

Our Sketch-to-3D Workflow

Data Collection & Preprocessing

Model Training

Image Generation

3D Model Creation

Refinement & Optimization

Technical Architecture

Neural Network Pipeline

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This