[V0_FILE]typescriptreact:file="components/image-uploader/types.ts" isMerged="true" export interface Props { onImageUpload: (file: File, preview: string) => void } [V0_FILE]typescriptreact:file="components/svg-preview/types.ts" isMerged="true" export interface Props { svgData: string originalWidth?: number originalHeight?: number } [V0_FILE]xml:file="public/vectorizer-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/vectorizer%20logo-cAVB0BVuPOJxX83bUriTBiMjY7ZEf7.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/footer/types.ts" isMerged="true" export interface Props { className?: string } [V0_FILE]typescriptreact:file="components/settings/types.ts" isMerged="true" export interface Props { className?: string } export interface Settings { mode: "production" | "preview" isTest: boolean } export type ApiMode = "production" | "preview" | "test" | "test_preview" [V0_FILE]typescriptreact:file="components/settings/index.tsx" isMerged="true" "use client" import { useState } from "react" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import type { Settings, Props } from "./types" import { Cog } from "lucide-react" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" export function SettingsPanel({ className }: Props) { const [settings, setSettings] = useState({ mode: "production", isTest: true, }) const handleModeChange = (value: "production" | "preview") => { setSettings((prev) => ({ ...prev, mode: value })) } const handleTestChange = (checked: boolean) => { setSettings((prev) => ({ ...prev, isTest: checked })) } return (

API Settings

Mode void} className="flex flex-col space-y-1" >

Production

Preview

Test Mode

Current API mode: {getApiMode(settings)}

) } export function getApiMode(settings: Settings): string { if (settings.isTest) { return settings.mode === "production" ? "test" : "test_preview" } return settings.mode } [V0_FILE]typescriptreact:file="lib/settings-store.ts" isMerged="true" import { create } from "zustand" import type { Settings, ApiMode } from "@/components/settings/types" interface SettingsStore { settings: Settings updateSettings: (settings: Partial) => void getApiMode: () => ApiMode } export const useSettingsStore = create((set, get) => ({ settings: { mode: "production", isTest: true, }, updateSettings: (newSettings) => set((state) => ({ settings: { ...state.settings, ...newSettings }, })), getApiMode: () => { const { settings } = get() if (settings.isTest) { return settings.mode === "production" ? "test" : "test_preview" } return settings.mode as ApiMode }, })) [V0_FILE]typescriptreact:file="package.json" isMerged="true" { "dependencies": { "zustand": "^4.5.0" } } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-4 border-black shadow-[5px_5px_0px_0px_rgba(0,0,0)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0)] active:shadow-[0px_0px_0px_0px_rgba(0,0,0)] hover:translate-x-[3px] hover:translate-y-[3px] active:translate-x-[5px] active:translate-y-[5px] transition-all", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground border-0 shadow-none hover:shadow-none active:shadow-none hover:translate-x-0 hover:translate-y-0 active:translate-x-0 active:translate-y-0", link: "text-primary underline-offset-4 hover:underline border-0 shadow-none hover:shadow-none active:shadow-none hover:translate-x-0 hover:translate-y-0 active:translate-x-0 active:translate-y-0", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]plaintext:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-rFD7gCuxR9VzPmRwObhdxOoa6bBj2f.ico" isMerged="true" [V0_FILE]typescriptreact:file="components/image-to-svg-converter/types.ts" isMerged="true" export interface Props { className?: string onImageStateChange?: (hasImage: boolean, canDownload: boolean, downloadFn: ((format?: string) => void) | null) => void } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { chango: ["var(--font-chango)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 100% 50%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; --dot-color: 220 70% 30%; --dot-size: 1px; --dot-space: 25px; --bg-color: 0 0% 100%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } .font-chango { font-family: var(--font-chango), sans-serif; } } .dotted-background { background-color: hsl(var(--bg-color)); background-image: radial-gradient(hsl(var(--dot-color)) var(--dot-size), transparent var(--dot-size)); background-size: var(--dot-space) var(--dot-space); background-position: center center; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist } from "next/font/google" import { Chango } from "next/font/google" import "./globals.css" const geist = Geist({ subsets: ["latin"], }) const chango = Chango({ weight: "400", subsets: ["latin"], variable: "--font-chango", }) export const metadata: Metadata = { title: "Image to SVG Converter - Vectorizer AI", description: "Convert your images to scalable vector graphics (SVG) using Vectorizer AI", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/footer/index.tsx" isMerged="true" import Image from "next/image" import type { Props } from "./types" export function Footer({ className }: Props) { return ( ) } [V0_FILE]plaintext:file="public/image-to-svg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-to-svg-qvRT8eUkSrrPSbzM35SyB0ZGuqxOAl.png" isMerged="true" [V0_FILE]typescriptreact:file="components/image-uploader/index.tsx" isMerged="true" "use client" import type React from "react" import Image from "next/image" import { useState, useRef } from "react" import type { Props } from "./types" export function ImageUploader({ onImageUpload }: Props) { const [isDragging, setIsDragging] = useState(false) const fileInputRef = useRef(null) const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { processFile(file) } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = () => { setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) const file = e.dataTransfer.files?.[0] if (file && file.type.startsWith("image/")) { processFile(file) } } const processFile = (file: File) => { const reader = new FileReader() reader.onload = (e) => { const preview = e.target?.result as string onImageUpload(file, preview) } reader.readAsDataURL(file) } const handleButtonClick = () => { fileInputRef.current?.click() } return (

Drag and drop an image, or click to browse

Supports JPG, PNG, WebP, GIF (max 5MB)

) } [V0_FILE]typescriptreact:file="components/settings-panel/index.tsx" isMerged="true" "use client" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Cog } from "lucide-react" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { useSettingsStore } from "@/lib/settings-store" import type { Props } from "./types" export function SettingsPanel({ className, buttonColor = "orange" }: Props) { const { settings, updateSettings, getApiMode } = useSettingsStore() const handleModeChange = (value: string) => { updateSettings({ mode: value as "production" | "preview" }) } const handleTestChange = (checked: boolean) => { updateSettings({ isTest: checked }) } const getButtonBgColor = () => { if (buttonColor === "pink") return "bg-pink-300 hover:bg-pink-400" if (buttonColor === "purple") return "bg-purple-300 hover:bg-purple-400" return "bg-orange-300 hover:bg-orange-400" } return (

API Settings

Mode

Production

Preview

Test Mode

Current API mode: {getApiMode()}

) } [V0_FILE]typescriptreact:file="components/settings-panel/types.ts" isMerged="true" export interface Props { className?: string buttonColor?: string } [V0_FILE]typescriptreact:file="components/svg-preview/index.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import type { Props } from "./types" export function SvgPreview({ svgData, originalWidth, originalHeight }: Props) { const containerRef = useRef(null) useEffect(() => { if (containerRef.current && svgData) { containerRef.current.innerHTML = svgData const svgElement = containerRef.current.querySelector("svg") if (svgElement) { svgElement.setAttribute("width", "100%") svgElement.setAttribute("height", "100%") svgElement.style.maxWidth = "100%" svgElement.style.maxHeight = "100%" if (originalWidth && originalHeight) { svgElement.setAttribute("viewBox", `0 0 ${originalWidth} ${originalHeight}`) svgElement.setAttribute("preserveAspectRatio", "xMidYMid meet") } } } }, [svgData, originalWidth, originalHeight]) return

} [V0_FILE]typescriptreact:file="components/loading-spinner/types.ts" isMerged="true" export interface Props { size?: number color?: string } [V0_FILE]typescriptreact:file="components/loading-spinner/index.tsx" isMerged="true" import type { Props } from "./types" export function LoadingSpinner({ size = 40, color = "#000000" }: Props) { return (

) } [V0_FILE]typescriptreact:file="lib/api.ts" isMerged="true" import type { ApiMode } from "@/components/settings/types" // Client-side interfaces export interface VectorizerOptions { mode?: ApiMode maxColors?: number retentionDays?: number palette?: string minAreaPx?: number fileFormat?: "svg" | "eps" | "pdf" | "dxf" | "png" } export interface VectorizerResponse { svgData: string imageToken?: string creditsCharged?: number creditsCalculated?: number receipt?: string } // Client-side functions export async function convertImageToSvg(imageFile: File, mode?: ApiMode): Promise { const result = await vectorizeImage(imageFile, { mode }) return result.svgData } export async function vectorizeImage(imageFile: File, options: VectorizerOptions = {}): Promise { if (imageFile.size > 5 * 1024 * 1024) { throw new Error("Image size exceeds 5MB limit") } const supportedTypes = ["image/jpeg", "image/png", "image/webp", "image/gif"] if (!supportedTypes.includes(imageFile.type)) { throw new Error("Unsupported file type. Please use JPG, PNG, WebP, or GIF") } const formData = new FormData() formData.append("image", imageFile) // Add options to formData if (options.mode) { formData.append("mode", options.mode) } if (options.maxColors !== undefined) { formData.append("processing.max_colors", options.maxColors.toString()) } if (options.retentionDays !== undefined) { formData.append("policy.retention_days", options.retentionDays.toString()) } if (options.palette) { formData.append("processing.palette", options.palette) } if (options.minAreaPx !== undefined) { formData.append("processing.shapes.min_area_px", options.minAreaPx.toString()) } if (options.fileFormat) { formData.append("output.file_format", options.fileFormat) } try { const response = await fetch("/api/vectorize", { method: "POST", body: formData, }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) throw new Error(errorData.error || `API error: ${response.status}`) } const svgData = await response.text() const imageToken = response.headers.get("X-Image-Token") || undefined const creditsCharged = Number.parseFloat(response.headers.get("X-Credits-Charged") || "0") const creditsCalculated = Number.parseFloat(response.headers.get("X-Credits-Calculated") || "0") const receipt = response.headers.get("X-Receipt") || undefined return { svgData, imageToken, creditsCharged, creditsCalculated, receipt, } } catch (error) { if (error instanceof Error) { throw error } throw new Error("Failed to convert image to SVG") } } export async function downloadVectorizedImage( imageToken: string, receipt?: string, fileFormat: "svg" | "eps" | "pdf" | "dxf" | "png" = "svg", ): Promise { const formData = new FormData() formData.append("image.token", imageToken) formData.append("output.file_format", fileFormat) if (receipt) { formData.append("receipt", receipt) } try { const response = await fetch("/api/vectorize/download", { method: "POST", body: formData, }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) throw new Error(errorData.error || `API error: ${response.status}`) } const svgData = await response.text() const newReceipt = response.headers.get("X-Receipt") || undefined const creditsCharged = Number.parseFloat(response.headers.get("X-Credits-Charged") || "0") const creditsCalculated = Number.parseFloat(response.headers.get("X-Credits-Calculated") || "0") return { svgData, receipt: newReceipt, creditsCharged, creditsCalculated, } } catch (error) { if (error instanceof Error) { throw error } throw new Error("Failed to download vectorized image") } } export async function getAccountStatus(): Promise<{ subscriptionPlan: string subscriptionState: string credits: number }> { try { const response = await fetch("/api/vectorize/account") if (!response.ok) { const errorData = await response.json().catch(() => ({})) throw new Error(errorData.error || `API error: ${response.status}`) } return await response.json() } catch (error) { if (error instanceof Error) { throw error } throw new Error("Failed to get account status") } } export async function deleteImage(imageToken: string): Promise { const formData = new FormData() formData.append("image.token", imageToken) try { const response = await fetch("/api/vectorize/delete", { method: "POST", body: formData, }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) throw new Error(errorData.error || `API error: ${response.status}`) } const data = await response.json() return data.success === true } catch (error) { if (error instanceof Error) { throw error } throw new Error("Failed to delete image") } } [V0_FILE]typescriptreact:file="lib/vectorizer-api.ts" isEdit="true" isMerged="true" // Server-side interfaces export interface VectorizerOptions { mode?: string maxColors?: number retentionDays?: number palette?: string minAreaPx?: number fileFormat?: "svg" | "eps" | "pdf" | "dxf" | "png" } export interface DownloadOptions { imageToken: string receipt?: string fileFormat?: "svg" | "eps" | "pdf" | "dxf" | "png" } export interface AccountStatus { subscriptionPlan: string subscriptionState: string credits: number } // Server-side functions export async function vectorizeImage( imageFile: File, options: VectorizerOptions = {}, credentials: { username: string; password: string }, ): Promise<{ data: string; headers: Headers }> { const { username, password } = credentials // Create a new FormData for the API request const apiFormData = new FormData() apiFormData.append("image", imageFile) // Add options to formData if (options.mode) { apiFormData.append("mode", options.mode) } if (options.maxColors !== undefined) { apiFormData.append("processing.max_colors", options.maxColors.toString()) } if (options.retentionDays !== undefined) { apiFormData.append("policy.retention_days", options.retentionDays.toString()) } if (options.palette) { apiFormData.append("processing.palette", options.palette) } if (options.minAreaPx !== undefined) { apiFormData.append("processing.shapes.min_area_px", options.minAreaPx.toString()) } if (options.fileFormat) { apiFormData.append("output.file_format", options.fileFormat) } // Basic authentication const authString = Buffer.from(`${username}:${password}`).toString("base64") // Make the API request const response = await fetch("https://vectorizer.ai/api/v1/vectorize", { method: "POST", headers: { Authorization: `Basic ${authString}`, }, body: apiFormData, }) if (!response.ok) { let errorMessage = "Vectorizer API error" try { const errorData = await response.json() errorMessage = errorData.error?.message || errorMessage } catch { errorMessage = `${errorMessage}: ${response.status}` } throw new Error(errorMessage) } // Get the response data const data = await response.text() return { data, headers: response.headers } } export async function downloadVector( options: DownloadOptions, credentials: { username: string; password: string }, ): Promise<{ data: string; headers: Headers }> { const { username, password } = credentials // Create a new FormData for the API request const apiFormData = new FormData() apiFormData.append("image.token", options.imageToken) if (options.receipt) { apiFormData.append("receipt", options.receipt) } if (options.fileFormat) { apiFormData.append("output.file_format", options.fileFormat) } // Basic authentication const authString = Buffer.from(`${username}:${password}`).toString("base64") // Make the API request const response = await fetch("https://vectorizer.ai/api/v1/download", { method: "POST", headers: { Authorization: `Basic ${authString}`, }, body: apiFormData, }) if (!response.ok) { let errorMessage = "Vectorizer API error" try { const errorData = await response.json() errorMessage = errorData.error?.message || errorMessage } catch { errorMessage = `${errorMessage}: ${response.status}` } throw new Error(errorMessage) } // Get the response data const data = await response.text() return { data, headers: response.headers } } export async function deleteImage( imageToken: string, credentials: { username: string; password: string }, ): Promise { const { username, password } = credentials // Create a new FormData for the API request const apiFormData = new FormData() apiFormData.append("image.token", imageToken) // Basic authentication const authString = Buffer.from(`${username}:${password}`).toString("base64") // Make the API request const response = await fetch("https://vectorizer.ai/api/v1/delete", { method: "POST", headers: { Authorization: `Basic ${authString}`, }, body: apiFormData, }) if (!response.ok) { let errorMessage = "Vectorizer API error" try { const errorData = await response.json() errorMessage = errorData.error?.message || errorMessage } catch { errorMessage = `${errorMessage}: ${response.status}` } throw new Error(errorMessage) } // Get the response data const data = await response.json() return data.success === true } export async function getAccountStatus(credentials: { username: string password: string }): Promise { const { username, password } = credentials // Basic authentication const authString = Buffer.from(`${username}:${password}`).toString("base64") // Make the API request const response = await fetch("https://vectorizer.ai/api/v1/account", { method: "GET", headers: { Authorization: `Basic ${authString}`, }, }) if (!response.ok) { let errorMessage = "Vectorizer API error" try { const errorData = await response.json() errorMessage = errorData.error?.message || errorMessage } catch { errorMessage = `${errorMessage}: ${response.status}` } throw new Error(errorMessage) } // Get the response data const data = await response.json() return { subscriptionPlan: data.subscriptionPlan, subscriptionState: data.subscriptionState, credits: data.credits, } } [V0_FILE]typescriptreact:file="app/api/vectorize/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { vectorizeImage } from "@/lib/vectorizer-api" export async function POST(request: NextRequest) { try { const formData = await request.formData() const imageFile = formData.get("image") as File const mode = (formData.get("mode") as string) || "test" const maxColors = formData.get("processing.max_colors") as string | null const retentionDays = formData.get("policy.retention_days") as string | null const palette = formData.get("processing.palette") as string | null const minAreaPx = formData.get("processing.shapes.min_area_px") as string | null const fileFormat = formData.get("output.file_format") as string | null if (!imageFile) { return NextResponse.json({ error: "No image provided" }, { status: 400 }) } const username = process.env.VECTORIZER_API_USERNAME const password = process.env.VECTORIZER_API_PASSWORD if (!username || !password) { return NextResponse.json({ error: "API credentials not configured" }, { status: 500 }) } // Call the Vectorizer API using our utility function const { data: svgData, headers } = await vectorizeImage( imageFile, { mode, maxColors: maxColors ? Number.parseInt(maxColors) : undefined, retentionDays: retentionDays ? Number.parseInt(retentionDays) : undefined, palette: palette || undefined, minAreaPx: minAreaPx ? Number.parseFloat(minAreaPx) : undefined, fileFormat: (fileFormat as any) || undefined, }, { username, password }, ) // Create response with appropriate headers but without Content-Disposition const nextResponse = new NextResponse(svgData, { headers: { "Content-Type": "image/svg+xml", }, }) // Forward relevant headers from the API response const headersToForward = ["X-Image-Token", "X-Credits-Charged", "X-Credits-Calculated", "X-Receipt"] for (const header of headersToForward) { const value = headers.get(header) if (value) { nextResponse.headers.set(header, value) } } return nextResponse } catch (error) { console.error("Error processing image:", error) return NextResponse.json( { error: error instanceof Error ? error.message : "Failed to process image", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/vectorize/delete/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { deleteImage } from "@/lib/vectorizer-api" export async function POST(request: NextRequest) { try { const formData = await request.formData() const imageToken = formData.get("image.token") as string if (!imageToken) { return NextResponse.json({ error: "No image token provided" }, { status: 400 }) } const username = process.env.VECTORIZER_API_USERNAME const password = process.env.VECTORIZER_API_PASSWORD if (!username || !password) { return NextResponse.json({ error: "API credentials not configured" }, { status: 500 }) } // Call the Vectorizer API using our utility function const success = await deleteImage(imageToken, { username, password }) return NextResponse.json({ success }) } catch (error) { console.error("Error deleting image:", error) return NextResponse.json( { error: error instanceof Error ? error.message : "Failed to delete image", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/vectorize/account/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getAccountStatus } from "@/lib/vectorizer-api" export async function GET(request: NextRequest) { try { const username = process.env.VECTORIZER_API_USERNAME const password = process.env.VECTORIZER_API_PASSWORD if (!username || !password) { return NextResponse.json({ error: "API credentials not configured" }, { status: 500 }) } // Call the Vectorizer API using our utility function const accountStatus = await getAccountStatus({ username, password }) return NextResponse.json(accountStatus) } catch (error) { console.error("Error getting account status:", error) return NextResponse.json( { error: error instanceof Error ? error.message : "Failed to get account status", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/vectorize/download/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { downloadVector } from "@/lib/vectorizer-api" export async function POST(request: NextRequest) { try { const formData = await request.formData() const imageToken = formData.get("image.token") as string const receipt = formData.get("receipt") as string | null const fileFormat = (formData.get("output.file_format") as string) || "svg" if (!imageToken) { return NextResponse.json({ error: "No image token provided" }, { status: 400 }) } const username = process.env.VECTORIZER_API_USERNAME const password = process.env.VECTORIZER_API_PASSWORD if (!username || !password) { return NextResponse.json({ error: "API credentials not configured" }, { status: 500 }) } // Call the Vectorizer API using our utility function const { data: responseData, headers } = await downloadVector( { imageToken, receipt: receipt || undefined, fileFormat: fileFormat as any, }, { username, password }, ) // Determine content type based on file format let contentType = "image/svg+xml" switch (fileFormat) { case "pdf": contentType = "application/pdf" break case "eps": contentType = "application/postscript" break case "dxf": contentType = "application/dxf" break case "png": contentType = "image/png" break } // Create response with appropriate headers - removed Content-Disposition to prevent auto-download const nextResponse = new NextResponse(responseData, { headers: { "Content-Type": contentType, }, }) // Forward relevant headers from the API response const headersToForward = ["X-Credits-Charged", "X-Credits-Calculated", "X-Receipt"] for (const header of headersToForward) { const value = headers.get(header) if (value) { nextResponse.headers.set(header, value) } } return nextResponse } catch (error) { console.error("Error downloading vectorized image:", error) return NextResponse.json( { error: error instanceof Error ? error.message : "Failed to download vectorized image", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { ImageToSvgConverter } from "@/components/image-to-svg-converter" import { Footer } from "@/components/footer" import { SettingsPanel } from "@/components/settings-panel" import { useState } from "react" export default function Home() { const [hasImage, setHasImage] = useState(false) const handleImageStateChange = ( hasImage: boolean, canDownload: boolean, downloadFn: ((format?: string) => void) | null, ) => { setHasImage(hasImage) } return (

{/* Placeholder for spacing */}

IMAGE TO SVG

{!hasImage ? ( ) : (

/* Placeholder for spacing */ )}

) } [V0_FILE]typescriptreact:file="components/image-to-svg-converter/index.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { ImageUploader } from "@/components/image-uploader" import { SvgPreview } from "@/components/svg-preview" import { convertImageToSvg } from "@/lib/api" import { useSettingsStore } from "@/lib/settings-store" import { Download, RefreshCw } from "lucide-react" import type { Props } from "./types" // Add a global reset function that can be called from outside declare global { interface Window { imageToSvgReset?: () => void } } export function ImageToSvgConverter({ className, onImageStateChange }: Props) { const [isConverting, setIsConverting] = useState(false) const [imageFile, setImageFile] = useState(null) const [imagePreview, setImagePreview] = useState(null) const [svgData, setSvgData] = useState(null) const [error, setError] = useState(null) const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null) const { getApiMode } = useSettingsStore() // Register the reset function globally so it can be called from the parent useEffect(() => { window.imageToSvgReset = handleReset return () => { delete window.imageToSvgReset } }, []) // Notify parent component when image state changes useEffect(() => { if (onImageStateChange) { onImageStateChange(!!imageFile, !!svgData, svgData ? handleDownload : null) } }, [imageFile, svgData, onImageStateChange]) const handleImageUpload = (file: File, preview: string) => { setImageFile(file) setImagePreview(preview) setSvgData(null) setError(null) const img = new Image() img.onload = () => { setImageDimensions({ width: img.width, height: img.height, }) } img.src = preview // Automatically start conversion when image is uploaded convertImage(file) } const convertImage = async (file: File) => { try { setIsConverting(true) setError(null) const svg = await convertImageToSvg(file, getApiMode()) setSvgData(svg) } catch (err) { setError(err instanceof Error ? err.message : "Failed to convert image to SVG") } finally { setIsConverting(false) } } const handleDownload = () => { if (!svgData || !imageFile) return const blob = new Blob([svgData], { type: "image/svg+xml" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `${imageFile.name.split(".")[0] || "image"}.svg` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } const handleReset = () => { setImageFile(null) setImagePreview(null) setSvgData(null) setError(null) setImageDimensions(null) } if (!imageFile) { return (

) } const imageContainerStyle = { height: "400px", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", } return (

ORIGINAL IMAGE

{error && (

{error}

)}

START OVER

SVG RESULT

{svgData ? ( ) : (

{isConverting ? (

CONVERTING...

) : (

SVG will appear here after conversion

)}

{svgData && (

DOWNLOAD SVG

)}

) }

About

Tags

Share

More from ctate

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This