[V0_FILE]plaintext:file="public/images/original-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CleanShot%202025-04-21%20at%2007.18.50%402x-dZYTCjkP7AhQCvCtNcNHt4amOQSwtX.png" isMerged="true" [V0_FILE]typescriptreact:file="ascii-converter.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef, type ChangeEvent } from "react" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { GripVertical, Upload, Download } from "lucide-react" // Define a type for colored ASCII characters type ColoredChar = { char: string color: string } export default function AsciiConverter() { // Add this at the beginning of the component, right after the imports useEffect(() => { // Set document background to black if (typeof document !== "undefined") { document.documentElement.style.backgroundColor = "black" document.body.style.backgroundColor = "black" } return () => { // Clean up when component unmounts if (typeof document !== "undefined") { document.documentElement.style.backgroundColor = "" document.body.style.backgroundColor = "" } } }, []) const [resolution, setResolution] = useState(0.11) const [inverted, setInverted] = useState(false) const [grayscale, setGrayscale] = useState(true) const [charSet, setCharSet] = useState("standard") const [loading, setLoading] = useState(true) const [imageLoaded, setImageLoaded] = useState(false) const [asciiArt, setAsciiArt] = useState("") const [coloredAsciiArt, setColoredAsciiArt] = useState([]) const [leftPanelWidth, setLeftPanelWidth] = useState(25) // percentage const [isDragging, setIsDragging] = useState(false) const [isDraggingFile, setIsDraggingFile] = useState(false) const [error, setError] = useState(null) const [isDesktop, setIsDesktop] = useState(false) const [isHydrated, setIsHydrated] = useState(false) const [sidebarNarrow, setSidebarNarrow] = useState(false) const containerRef = useRef(null) const canvasRef = useRef(null) const imageRef = useRef(null) const fileInputRef = useRef(null) const previewRef = useRef(null) // Add a new ref for the output canvas const outputCanvasRef = useRef(null) const charSets = { standard: " .:-=+*#%@", detailed: " .,:;i1tfLCG08@", blocks: " ░▒▓█", minimal: " .:█", gitCommits: "⬜🟩🟨🟧🟥", // Using emoji squares for different contribution intensities } // Update the gitCommitColors array with the dark theme colors from the image const gitCommitColors = [ "#161b22", // empty/no contribution (dark background) "#0e4429", // level 1 contribution (darkest green) "#006d32", // level 2 contribution (dark green) "#26a641", // level 3 contribution (medium green) "#39d353", // level 4 contribution (bright green) ] // Set hydration state useEffect(() => { setIsHydrated(true) }, []) useEffect(() => { if (!isHydrated) return // Check if we're on the client side setIsDesktop(window.innerWidth >= 768) // Add resize listener const handleResize = () => { const newIsDesktop = window.innerWidth >= 768 setIsDesktop(newIsDesktop) // Reset panel width if switching between mobile and desktop if (newIsDesktop !== isDesktop) { setLeftPanelWidth(25) // Reset to default when switching layouts } } window.addEventListener("resize", handleResize) // Load default image loadDefaultImage() return () => { window.removeEventListener("resize", handleResize) } }, [isDesktop, isHydrated]) // Check if sidebar is narrow useEffect(() => { if (!isHydrated || !isDesktop) return // Check if sidebar is narrow (less than 200px) const checkSidebarWidth = () => { if (containerRef.current) { const containerWidth = containerRef.current.clientWidth const sidebarWidth = (leftPanelWidth / 100) * containerWidth setSidebarNarrow(sidebarWidth < 350) } } checkSidebarWidth() // Add resize listener to check sidebar width window.addEventListener("resize", checkSidebarWidth) return () => { window.removeEventListener("resize", checkSidebarWidth) } }, [leftPanelWidth, isHydrated, isDesktop]) useEffect(() => { if (imageLoaded && imageRef.current) { convertToAscii() } }, [resolution, inverted, grayscale, charSet, imageLoaded]) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDragging && containerRef.current) { const containerRect = containerRef.current.getBoundingClientRect() const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100 // Limit the minimum width of each panel to 20% if (newLeftWidth >= 20 && newLeftWidth <= 80) { setLeftPanelWidth(newLeftWidth) } } } const handleMouseUp = () => { setIsDragging(false) } if (isDragging) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isDragging]) const startDragging = () => { setIsDragging(true) } const loadDefaultImage = () => { setLoading(true) setError(null) setImageLoaded(false) // Create a new image element const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { if (img.width === 0 || img.height === 0) { setError("Invalid image dimensions") setLoading(false) return } imageRef.current = img setImageLoaded(true) setLoading(false) } img.onerror = () => { setError("Failed to load image") setLoading(false) } // Set the source after setting up event handlers img.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gd0nxwuWsAAwl8C-dCX01rT2TI03vVZxft74Isk1FHYnGw.jpeg" } const loadImage = (src: string) => { setLoading(true) setError(null) setImageLoaded(false) // Create a new image element const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { if (img.width === 0 || img.height === 0) { setError("Invalid image dimensions") setLoading(false) return } imageRef.current = img setImageLoaded(true) setLoading(false) } img.onerror = () => { setError("Failed to load image") setLoading(false) } // Set the source after setting up event handlers img.src = src } const handleFileUpload = (file: File) => { if (!file.type.startsWith("image/")) { setError("Please upload an image file") return } const reader = new FileReader() reader.onload = (e) => { if (e.target?.result) { loadImage(e.target.result as string) } } reader.onerror = () => { setError("Failed to read file") } reader.readAsDataURL(file) } const handleFileInputChange = (e: ChangeEvent) => { if (e.target.files && e.target.files[0]) { handleFileUpload(e.target.files[0]) } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDraggingFile(true) } const handleDragLeave = () => { setIsDraggingFile(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDraggingFile(false) if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleFileUpload(e.dataTransfer.files[0]) } } // Helper function to adjust color brightness const adjustColorBrightness = (r: number, g: number, b: number, factor: number): string => { // Ensure the colors are visible against black background const minBrightness = 40 // Minimum brightness to ensure visibility r = Math.max(Math.min(Math.round(r * factor), 255), minBrightness) g = Math.max(Math.min(Math.round(g * factor), 255), minBrightness) b = Math.max(Math.min(Math.round(b * factor), 255), minBrightness) return `rgb(${r}, ${g}, ${b})` } // Modify the renderToCanvas function to maintain aspect ratio for Git Commits mode const renderToCanvas = () => { if (!outputCanvasRef.current || !asciiArt || coloredAsciiArt.length === 0) return const canvas = outputCanvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Special handling for Git Commits mode const isGitCommitsMode = charSet === "gitCommits" if (isGitCommitsMode) { // For Git Commits mode, we'll use squares with spacing const squareSize = 10 // Size of each square const spacing = 2 // Spacing between squares // Calculate the number of rows and columns in our ASCII art const rows = coloredAsciiArt.length const cols = coloredAsciiArt[0].length // Calculate the total width and height with spacing const totalWidth = cols * (squareSize + spacing) - spacing const totalHeight = rows * (squareSize + spacing) - spacing // Set canvas dimensions canvas.width = totalWidth canvas.height = totalHeight // Fill with dark background ctx.fillStyle = "#0d1117" // GitHub dark theme background ctx.fillRect(0, 0, canvas.width, canvas.height) // Draw all squares - both dark and colored coloredAsciiArt.forEach((row, rowIndex) => { row.forEach((col, colIndex) => { const x = colIndex * (squareSize + spacing) const y = rowIndex * (squareSize + spacing) const radius = 2 // Radius for rounded corners // Draw the rounded square ctx.fillStyle = col.color ctx.beginPath() ctx.moveTo(x + radius, y) ctx.lineTo(x + squareSize - radius, y) ctx.quadraticCurveTo(x + squareSize, y, x + squareSize, y + radius) ctx.lineTo(x + squareSize, y + squareSize - radius) ctx.quadraticCurveTo(x + squareSize, y + squareSize, x + squareSize - radius, y + squareSize) ctx.lineTo(x + radius, y + squareSize) ctx.quadraticCurveTo(x, y + squareSize, x, y + squareSize - radius) ctx.lineTo(x, y + radius) ctx.quadraticCurveTo(x, y, x + radius, y) ctx.closePath() ctx.fill() }) }) } else if (grayscale) { // Standard ASCII art rendering for grayscale mode const fontSize = 8 // Base font size in pixels ctx.font = `${fontSize}px monospace` ctx.textBaseline = "top" const lineHeight = fontSize const charWidth = fontSize * 0.6 // Approximate width of monospace character const lines = asciiArt.split("\n") const maxLineLength = Math.max(...lines.map((line) => line.length)) canvas.width = maxLineLength * charWidth canvas.height = lines.length * lineHeight // Re-apply font after canvas resize ctx.font = `${fontSize}px monospace` ctx.textBaseline = "top" ctx.fillStyle = "white" asciiArt.split("\n").forEach((line, lineIndex) => { ctx.fillText(line, 0, lineIndex * lineHeight) }) } else { // Standard ASCII art rendering for colored mode const fontSize = 8 // Base font size in pixels ctx.font = `${fontSize}px monospace` ctx.textBaseline = "top" const lineHeight = fontSize const charWidth = fontSize * 0.6 // Approximate width of monospace character canvas.width = coloredAsciiArt[0].length * charWidth canvas.height = coloredAsciiArt.length * lineHeight // Re-apply font after canvas resize ctx.font = `${fontSize}px monospace` ctx.textBaseline = "top" coloredAsciiArt.forEach((row, rowIndex) => { row.forEach((col, colIndex) => { ctx.fillStyle = col.color ctx.fillText(col.char, colIndex * charWidth, rowIndex * lineHeight) }) }) } } // Add this effect to trigger canvas rendering when ASCII art changes useEffect(() => { if (imageLoaded && !loading && !error) { renderToCanvas() } }, [asciiArt, coloredAsciiArt, grayscale, loading, error, imageLoaded]) // Update the convertToAscii function to handle Git Commits mode properly const convertToAscii = () => { try { if (!canvasRef.current || !imageRef.current) { throw new Error("Canvas or image not available") } const img = imageRef.current // Validate image dimensions if (img.width === 0 || img.height === 0) { throw new Error("Invalid image dimensions") } const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) { throw new Error("Could not get canvas context") } // Calculate dimensions based on resolution const width = Math.floor(img.width * resolution) const height = Math.floor(img.height * resolution) // Set canvas dimensions to match the image canvas.width = img.width canvas.height = img.height // Clear the canvas first ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw image to canvas ctx.drawImage(img, 0, 0, img.width, img.height) // Get image data - this is where the error was occurring let imageData try { imageData = ctx.getImageData(0, 0, img.width, img.height) } catch (e) { throw new Error("Failed to get image data. This might be a CORS issue.") } const data = imageData.data // Choose character set const chars = charSets[charSet as keyof typeof charSets] // For git commits mode, we need to maintain aspect ratio const isGitCommitsMode = charSet === "gitCommits" // Calculate aspect ratio correction for monospace font const fontAspect = 0.5 // Width/height ratio of monospace font characters // For Git Commits mode, we want to maintain the original aspect ratio let widthStep, heightStep if (isGitCommitsMode) { // Calculate steps to maintain aspect ratio const aspectRatio = img.width / img.height // Adjust resolution for Git Commits mode to maintain aspect ratio // We'll use a square grid, so we need to adjust the steps accordingly widthStep = Math.ceil(img.width / width) heightStep = Math.ceil(img.height / (width / aspectRatio)) } else { // Standard ASCII art steps widthStep = Math.ceil(img.width / width) heightStep = Math.ceil(img.height / height / fontAspect) } const gitColors = gitCommitColors let result = "" const coloredResult: ColoredChar[][] = [] // Process the image for (let y = 0; y < img.height; y += heightStep) { const coloredRow: ColoredChar[] = [] for (let x = 0; x < img.width; x += widthStep) { const pos = (y * img.width + x) * 4 const r = data[pos] const g = data[pos + 1] const b = data[pos + 2] // Calculate brightness based on grayscale setting let brightness if (grayscale) { // Standard grayscale calculation brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255 } else { // Color-aware brightness (perceived luminance) brightness = Math.sqrt( 0.299 * (r / 255) * (r / 255) + 0.587 * (g / 255) * (g / 255) + 0.114 * (b / 255) * (b / 255), ) } // Invert if needed if (inverted) brightness = 1 - brightness // Map brightness to character let charIndex, char, color if (isGitCommitsMode) { // For git commits, we map to 5 different intensity levels charIndex = Math.floor(brightness * 4) // 0-4 index for git commit colors char = "■" // Use a solid square character for all git commits // Use the appropriate color based on brightness color = gitColors[charIndex] // For grayscale mode with git commits, we'll still use the color mapping // but render the squares in the grayscale color scheme if (grayscale) { const grayLevel = Math.floor(255 * brightness) color = `rgb(${grayLevel}, ${grayLevel}, ${grayLevel})` } } else { // Original character mapping for other modes charIndex = Math.floor(brightness * (chars.length - 1)) char = chars[charIndex] // For colored mode, calculate the color if (!grayscale) { const brightnessFactor = (charIndex / (chars.length - 1)) * 1.5 + 0.5 color = adjustColorBrightness(r, g, b, brightnessFactor) } else { color = "white" } } result += char coloredRow.push({ char, color }) } result += "\n" coloredResult.push(coloredRow) } setAsciiArt(result) setColoredAsciiArt(coloredResult) setError(null) } catch (err) { console.error("Error converting to ASCII:", err) setError(err instanceof Error ? err.message : "Unknown error occurred") setAsciiArt("") setColoredAsciiArt([]) } } // Add a function to download the canvas as an image const downloadCanvasAsImage = () => { if (!outputCanvasRef.current) { setError("No canvas to download") return } try { const canvas = outputCanvasRef.current const dataUrl = canvas.toDataURL("image/png") const element = document.createElement("a") element.href = dataUrl element.download = "git-commit-art.png" document.body.appendChild(element) element.click() document.body.removeChild(element) } catch (err) { console.error("Error downloading canvas:", err) setError("Failed to download image") } } const downloadAsciiArt = () => { if (!asciiArt) { setError("No ASCII art to download") return } const element = document.createElement("a") const file = new Blob([asciiArt], { type: "text/plain" }) element.href = URL.createObjectURL(file) element.download = "ascii-art.txt" document.body.appendChild(element) element.click() document.body.removeChild(element) } return (

{/* ASCII Art Preview - Top on mobile, Right on desktop */}

{isDraggingFile && (

Drop image here

)} {loading ? (

Loading image...

) : error ? (

{error}

Try uploading a different image or refreshing the page.

) : (

{/* Resizable divider - Only visible on desktop after hydration */} {isHydrated && isDesktop && (

)} {/* Control Panel - Bottom on mobile, Left on desktop */}

ASCII Art Converter

{error &&

{error}

}

Resolution: {resolution.toFixed(2)}

setResolution(value[0])} className="[&>span]:border-none [&_.bg-primary]:bg-stone-800 [&>.bg-background]:bg-stone-500/30" />

Character Set

Invert Colors

Grayscale Mode

{charSet === "gitCommits" ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="git-pic-converter.tsx" "use client" import type React from "react" import { useState, useEffect, useRef, type ChangeEvent } from "react" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { GripVertical, Upload, Download, Sun, Moon } from "lucide-react" // Define a type for colored ASCII characters type ColoredChar = { char: string color: string } export default function GitPicConverter() { // Add this at the beginning of the component, right after the imports useEffect(() => { // Set document background to black if (typeof document !== "undefined") { document.documentElement.style.backgroundColor = "black" document.body.style.backgroundColor = "black" } return () => { // Clean up when component unmounts if (typeof document !== "undefined") { document.documentElement.style.backgroundColor = "" document.body.style.backgroundColor = "" } } }, []) const [resolution, setResolution] = useState(0.11) const [inverted, setInverted] = useState(false) const [lightMode, setLightMode] = useState(false) const [loading, setLoading] = useState(true) const [imageLoaded, setImageLoaded] = useState(false) const [asciiArt, setAsciiArt] = useState("") const [coloredAsciiArt, setColoredAsciiArt] = useState([]) const [leftPanelWidth, setLeftPanelWidth] = useState(25) // percentage const [isDragging, setIsDragging] = useState(false) const [isDraggingFile, setIsDraggingFile] = useState(false) const [error, setError] = useState(null) const [isDesktop, setIsDesktop] = useState(false) const [isHydrated, setIsHydrated] = useState(false) const [sidebarNarrow, setSidebarNarrow] = useState(false) const containerRef = useRef(null) const canvasRef = useRef(null) const imageRef = useRef(null) const fileInputRef = useRef(null) const previewRef = useRef(null) // Add a new ref for the output canvas const outputCanvasRef = useRef(null) // Dark theme colors (GitHub dark theme) const darkThemeColors = [ "#161b22", // empty/no contribution (dark background) "#0e4429", // level 1 contribution (darkest green) "#006d32", // level 2 contribution (dark green) "#26a641", // level 3 contribution (medium green) "#39d353", // level 4 contribution (bright green) ] // Light theme colors (GitHub light theme) const lightThemeColors = [ "#ebedf0", // empty/no contribution (light background) "#9be9a8", // level 1 contribution (lightest green) "#40c463", // level 2 contribution (light green) "#30a14e", // level 3 contribution (medium green) "#216e39", // level 4 contribution (dark green) ] // Get the current color theme based on light/dark mode const getGitCommitColors = () => { return lightMode ? lightThemeColors : darkThemeColors } // Set hydration state useEffect(() => { setIsHydrated(true) }, []) useEffect(() => { if (!isHydrated) return // Check if we're on the client side setIsDesktop(window.innerWidth >= 768) // Add resize listener const handleResize = () => { const newIsDesktop = window.innerWidth >= 768 setIsDesktop(newIsDesktop) // Reset panel width if switching between mobile and desktop if (newIsDesktop !== isDesktop) { setLeftPanelWidth(25) // Reset to default when switching layouts } } window.addEventListener("resize", handleResize) // Load default image loadDefaultImage() return () => { window.removeEventListener("resize", handleResize) } }, [isDesktop, isHydrated]) // Check if sidebar is narrow useEffect(() => { if (!isHydrated || !isDesktop) return // Check if sidebar is narrow (less than 200px) const checkSidebarWidth = () => { if (containerRef.current) { const containerWidth = containerRef.current.clientWidth const sidebarWidth = (leftPanelWidth / 100) * containerWidth setSidebarNarrow(sidebarWidth < 350) } } checkSidebarWidth() // Add resize listener to check sidebar width window.addEventListener("resize", checkSidebarWidth) return () => { window.removeEventListener("resize", checkSidebarWidth) } }, [leftPanelWidth, isHydrated, isDesktop]) useEffect(() => { if (imageLoaded && imageRef.current) { convertToAscii() } }, [resolution, inverted, lightMode, imageLoaded]) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDragging && containerRef.current) { const containerRect = containerRef.current.getBoundingClientRect() const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100 // Limit the minimum width of each panel to 20% if (newLeftWidth >= 20 && newLeftWidth <= 80) { setLeftPanelWidth(newLeftWidth) } } } const handleMouseUp = () => { setIsDragging(false) } if (isDragging) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isDragging]) const startDragging = () => { setIsDragging(true) } const loadDefaultImage = () => { setLoading(true) setError(null) setImageLoaded(false) // Create a new image element const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { if (img.width === 0 || img.height === 0) { setError("Invalid image dimensions") setLoading(false) return } imageRef.current = img setImageLoaded(true) setLoading(false) } img.onerror = () => { setError("Failed to load image") setLoading(false) } // Set the source after setting up event handlers img.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gd0nxwuWsAAwl8C-dCX01rT2TI03vVZxft74Isk1FHYnGw.jpeg" } const loadImage = (src: string) => { setLoading(true) setError(null) setImageLoaded(false) // Create a new image element const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { if (img.width === 0 || img.height === 0) { setError("Invalid image dimensions") setLoading(false) return } imageRef.current = img setImageLoaded(true) setLoading(false) } img.onerror = () => { setError("Failed to load image") setLoading(false) } // Set the source after setting up event handlers img.src = src } const handleFileUpload = (file: File) => { if (!file.type.startsWith("image/")) { setError("Please upload an image file") return } const reader = new FileReader() reader.onload = (e) => { if (e.target?.result) { loadImage(e.target.result as string) } } reader.onerror = () => { setError("Failed to read file") } reader.readAsDataURL(file) } const handleFileInputChange = (e: ChangeEvent) => { if (e.target.files && e.target.files[0]) { handleFileUpload(e.target.files[0]) } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDraggingFile(true) } const handleDragLeave = () => { setIsDraggingFile(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDraggingFile(false) if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleFileUpload(e.dataTransfer.files[0]) } } // Modify the renderToCanvas function to maintain aspect ratio for Git Commits mode const renderToCanvas = () => { if (!outputCanvasRef.current || !asciiArt || coloredAsciiArt.length === 0) return const canvas = outputCanvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Get the current color theme const gitColors = getGitCommitColors() // For Git Commits mode, we'll use squares with spacing const squareSize = 10 // Size of each square const spacing = 2 // Spacing between squares // Calculate the number of rows and columns in our ASCII art const rows = coloredAsciiArt.length const cols = coloredAsciiArt[0].length // Calculate the total width and height with spacing const totalWidth = cols * (squareSize + spacing) - spacing const totalHeight = rows * (squareSize + spacing) - spacing // Set canvas dimensions canvas.width = totalWidth canvas.height = totalHeight // Fill with background color based on theme ctx.fillStyle = lightMode ? "#ffffff" : "#0d1117" // GitHub theme background ctx.fillRect(0, 0, canvas.width, canvas.height) // Draw all squares - both background and colored coloredAsciiArt.forEach((row, rowIndex) => { row.forEach((col, colIndex) => { const x = colIndex * (squareSize + spacing) const y = rowIndex * (squareSize + spacing) const radius = 2 // Radius for rounded corners // Draw the rounded square ctx.fillStyle = col.color ctx.beginPath() ctx.moveTo(x + radius, y) ctx.lineTo(x + squareSize - radius, y) ctx.quadraticCurveTo(x + squareSize, y, x + squareSize, y + radius) ctx.lineTo(x + squareSize, y + squareSize - radius) ctx.quadraticCurveTo(x + squareSize, y + squareSize, x + squareSize - radius, y + squareSize) ctx.lineTo(x + radius, y + squareSize) ctx.quadraticCurveTo(x, y + squareSize, x, y + squareSize - radius) ctx.lineTo(x, y + radius) ctx.quadraticCurveTo(x, y, x + radius, y) ctx.closePath() ctx.fill() }) }) } // Add this effect to trigger canvas rendering when ASCII art changes useEffect(() => { if (imageLoaded && !loading && !error) { renderToCanvas() } }, [asciiArt, coloredAsciiArt, lightMode, loading, error, imageLoaded]) // Update the convertToAscii function to handle Git Commits mode properly const convertToAscii = () => { try { if (!canvasRef.current || !imageRef.current) { throw new Error("Canvas or image not available") } const img = imageRef.current // Validate image dimensions if (img.width === 0 || img.height === 0) { throw new Error("Invalid image dimensions") } const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) { throw new Error("Could not get canvas context") } // Calculate dimensions based on resolution const width = Math.floor(img.width * resolution) const height = Math.floor(img.height * resolution) // Set canvas dimensions to match the image canvas.width = img.width canvas.height = img.height // Clear the canvas first ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw image to canvas ctx.drawImage(img, 0, 0, img.width, img.height) // Get image data - this is where the error was occurring let imageData try { imageData = ctx.getImageData(0, 0, img.width, img.height) } catch (e) { throw new Error("Failed to get image data. This might be a CORS issue.") } const data = imageData.data // Calculate aspect ratio correction for monospace font const fontAspect = 0.5 // Width/height ratio of monospace font characters // Calculate steps to maintain aspect ratio const aspectRatio = img.width / img.height // Adjust resolution to maintain aspect ratio // We'll use a square grid, so we need to adjust the steps accordingly const widthStep = Math.ceil(img.width / width) const heightStep = Math.ceil(img.height / (width / aspectRatio)) // Get the current color theme const gitColors = getGitCommitColors() let result = "" const coloredResult: ColoredChar[][] = [] // Process the image for (let y = 0; y < img.height; y += heightStep) { const coloredRow: ColoredChar[] = [] for (let x = 0; x < img.width; x += widthStep) { const pos = (y * img.width + x) * 4 const r = data[pos] const g = data[pos + 1] const b = data[pos + 2] // Calculate brightness let brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255 // Invert if needed if (inverted) brightness = 1 - brightness // Map brightness to color index (0-4) const charIndex = Math.floor(brightness * 4) // 0-4 index for git commit colors const char = "■" // Use a solid square character for all git commits // Use the appropriate color based on brightness const color = gitColors[charIndex] result += char coloredRow.push({ char, color }) } result += "\n" coloredResult.push(coloredRow) } setAsciiArt(result) setColoredAsciiArt(coloredResult) setError(null) } catch (err) { console.error("Error converting to ASCII:", err) setError(err instanceof Error ? err.message : "Unknown error occurred") setAsciiArt("") setColoredAsciiArt([]) } } // Add a function to download the canvas as an image const downloadCanvasAsImage = () => { if (!outputCanvasRef.current) { setError("No canvas to download") return } try { const canvas = outputCanvasRef.current const dataUrl = canvas.toDataURL("image/png") const element = document.createElement("a") element.href = dataUrl element.download = "git-pic-art.png" document.body.appendChild(element) element.click() document.body.removeChild(element) } catch (err) { console.error("Error downloading canvas:", err) setError("Failed to download image") } } return (

{/* Git Pic Preview - Top on mobile, Right on desktop */}

{isDraggingFile && (

Drop image here

)} {loading ? (

Loading image...

) : error ? (

{error}

Try uploading a different image or refreshing the page.

) : (

{/* Resizable divider - Only visible on desktop after hydration */} {isHydrated && isDesktop && (

)} {/* Control Panel - Bottom on mobile, Left on desktop */}

Image-to-GitHub Graph

{error &&

{error}

}

Resolution: {resolution.toFixed(2)}

setResolution(value[0])} className={`[&>span]:border-none ${ lightMode ? "[&_.bg-primary]:bg-gray-300 [&>.bg-background]:bg-gray-200/30" : "[&_.bg-primary]:bg-stone-800 [&>.bg-background]:bg-stone-500/30" }`} />

Invert Colors

{lightMode ? ( <> Light Mode ) : ( <> Dark Mode )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import GitPicConverter from "../git-pic-converter" export default function Page() { return }