import React, { useState, useRef, useEffect } from 'react'; import { Pencil, Eraser, Download, Undo, Redo, Trash2, Highlighter, Minus, Plus, Palette, Sparkles, Wand2, Brain, Lightbulb, X, Loader2 } from 'lucide-react'; export default function App() { const canvasRef = useRef(null); const containerRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [context, setContext] = useState(null); const [tool, setTool] = useState('pen'); // 'pen', 'marker', 'eraser' const [color, setColor] = useState('#1e293b'); const [brushSize, setBrushSize] = useState(5); const [history, setHistory] = useState([]); const [historyStep, setHistoryStep] = useState(-1); // AI State const [showAiMenu, setShowAiMenu] = useState(false); const [aiLoading, setAiLoading] = useState(false); const [aiPrompt, setAiPrompt] = useState(''); const [aiResult, setAiResult] = useState(null); // For text results const [aiMode, setAiMode] = useState(null); // 'refine', 'guess', 'inspire' const apiKey = ""; // API Key injected at runtime // Constants const COLORS = [ '#1e293b', // Slate 800 '#ef4444', // Red 500 '#f97316', // Orange 500 '#eab308', // Yellow 500 '#22c55e', // Green 500 '#3b82f6', // Blue 500 '#a855f7', // Purple 500 '#ec4899', // Pink 500 ]; // Initialize Canvas useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; // Set canvas size to match container const handleResize = () => { if (!canvas || !container) return; // 1. Capture existing content ONLY if canvas has valid dimensions let tempCanvas = null; if (canvas.width > 0 && canvas.height > 0) { tempCanvas = document.createElement('canvas'); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; const tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(canvas, 0, 0); } // 2. Resize canvas to container canvas.width = container.offsetWidth; canvas.height = container.offsetHeight; const ctx = canvas.getContext('2d'); ctx.lineCap = 'round'; ctx.lineJoin = 'round'; // 3. Restore content if (tempCanvas) { ctx.drawImage(tempCanvas, 0, 0); } else { // If no content preserved (initial load), clear to white ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); } setContext(ctx); }; // Delay initial resize to ensure container has dimensions const timer = setTimeout(() => { handleResize(); // Save initial blank state // We manually push the initial state here to ensure history starts correctly if (canvas) { setHistory([canvas.toDataURL()]); setHistoryStep(0); } }, 50); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); clearTimeout(timer); }; }, []); // Context updates when tools change useEffect(() => { if (!context) return; context.lineWidth = brushSize; if (tool === 'eraser') { context.globalCompositeOperation = 'destination-out'; } else { context.globalCompositeOperation = 'source-over'; context.strokeStyle = color; if (tool === 'marker') { context.globalAlpha = 0.5; // Marker needs to be thicker usually context.lineWidth = brushSize * 3; } else { context.globalAlpha = 1.0; } } }, [context, tool, color, brushSize]); // History Management const saveHistory = (ctx = context) => { if (!ctx || !canvasRef.current) return; const canvas = canvasRef.current; // Create a new steps array based on current position const newHistory = history.slice(0, historyStep + 1); newHistory.push(canvas.toDataURL()); setHistory(newHistory); setHistoryStep(newHistory.length - 1); }; const handleUndo = () => { if (historyStep > 0) { const newStep = historyStep - 1; restoreHistory(newStep); setHistoryStep(newStep); } }; const handleRedo = () => { if (historyStep < history.length - 1) { const newStep = historyStep + 1; restoreHistory(newStep); setHistoryStep(newStep); } }; const restoreHistory = (stepIndex) => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const img = new Image(); img.src = history[stepIndex]; img.onload = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = 'source-over'; // Reset for drawing image ctx.globalAlpha = 1.0; ctx.drawImage(img, 0, 0); // Restore current tool settings if (tool === 'eraser') { ctx.globalCompositeOperation = 'destination-out'; } else if (tool === 'marker') { ctx.globalAlpha = 0.5; } }; }; const clearCanvas = () => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1.0; ctx.fillRect(0, 0, canvas.width, canvas.height); saveHistory(ctx); }; const downloadCanvas = () => { const canvas = canvasRef.current; // Create a temporary canvas to composite white background (otherwise transparent parts are black in JPG or transparent in PNG) const tempCanvas = document.createElement('canvas'); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; const tempCtx = tempCanvas.getContext('2d'); // Fill white background tempCtx.fillStyle = '#ffffff'; tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height); tempCtx.drawImage(canvas, 0, 0); const link = document.createElement('a'); link.download = 'my-sketch.png'; link.href = tempCanvas.toDataURL(); link.click(); }; // Drawing Logic const getCoordinates = (e) => { if (!canvasRef.current) return { x: 0, y: 0 }; const rect = canvasRef.current.getBoundingClientRect(); let clientX, clientY; if (e.touches && e.touches.length > 0) { clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; } else { clientX = e.clientX; clientY = e.clientY; } return { x: clientX - rect.left, y: clientY - rect.top }; }; const startDrawing = (e) => { e.preventDefault(); // Prevent scrolling on touch if (showAiMenu) setShowAiMenu(false); const { x, y } = getCoordinates(e); context.beginPath(); context.moveTo(x, y); setIsDrawing(true); }; const draw = (e) => { e.preventDefault(); if (!isDrawing) return; const { x, y } = getCoordinates(e); context.lineTo(x, y); context.stroke(); }; const stopDrawing = (e) => { if (isDrawing) { context.closePath(); setIsDrawing(false); saveHistory(); } }; // --- Gemini API Logic --- const getCanvasBase64 = () => { // We need a composite with white background for the AI to see it correctly const canvas = canvasRef.current; const tempCanvas = document.createElement('canvas'); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; const tempCtx = tempCanvas.getContext('2d'); tempCtx.fillStyle = '#ffffff'; tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height); tempCtx.drawImage(canvas, 0, 0); return tempCanvas.toDataURL('image/png').split(',')[1]; }; const callGemini = async (mode, promptText = '') => { setAiLoading(true); setAiResult(null); const base64Image = getCanvasBase64(); let model = "gemini-2.5-flash-preview-09-2025"; let contents = []; let apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`; let generationConfig = {}; try { if (mode === 'inspire') { // Text Only contents = [{ parts: [{ text: "Give me a creative, fun, and simple drawing idea for a digital whiteboard app. Keep it to one short sentence." }] }]; } else if (mode === 'guess') { // Vision contents = [{ role: "user", parts: [ { text: "Look at this sketch. What is being drawn? Be encouraging and brief." }, { inlineData: { mimeType: "image/png", data: base64Image } } ] }]; } else if (mode === 'refine') { // Image to Image (Editing) model = "gemini-2.5-flash-image-preview"; apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`; contents = [{ parts: [ { text: promptText || "Turn this sketch into a polished, colorful illustration." }, { inlineData: { mimeType: "image/png", data: base64Image } } ] }]; generationConfig = { responseModalities: ['IMAGE'] }; } const makeRequest = async (retryCount = 0) => { try { const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents, generationConfig }) }); if (!response.ok) throw new Error(response.statusText); return await response.json(); } catch (error) { if (retryCount < 3) { await new Promise(r => setTimeout(r, 1000 * Math.pow(2, retryCount))); return makeRequest(retryCount + 1); } throw error; } }; const result = await makeRequest(); if (mode === 'refine') { // Handle Image Response const base64 = result.candidates?.[0]?.content?.parts?.find(p => p.inlineData)?.inlineData?.data; if (base64) { const img = new Image(); img.src = `data:image/png;base64,${base64}`; img.onload = () => { const ctx = canvasRef.current.getContext('2d'); ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height); ctx.drawImage(img, 0, 0, canvasRef.current.width, canvasRef.current.height); saveHistory(ctx); setAiResult("Sketch refined! ✨"); }; } } else { // Handle Text Response const text = result.candidates?.[0]?.content?.parts?.[0]?.text; setAiResult(text); } } catch (error) { console.error("Gemini API Error:", error); setAiResult("Oops! The AI got confused. Try again."); } finally { setAiLoading(false); } }; return (

{/* Header / Toolbar */}

{/* Logo & Main Tools */}

Canvas

{/* AI Magic Button */}

{/* AI Menu Dropdown/Panel */} {showAiMenu && (

AI Tools

{aiLoading ? (

Working magic...

) : aiResult && aiMode !== 'refine' ? (

"{aiResult}"

) : aiMode === 'refine' ? (

setAiPrompt(e.target.value)}
                          placeholder="E.g., Turn this sketch into a watercolor painting..."
                          className="w-full text-sm p-2 border border-slate-200 rounded-md focus:ring-2 focus:ring-indigo-500 focus:outline-none resize-none"
                          rows={3}
                        />
                        <div className="flex gap-2">
                           <button 
                             onClick={() => setAiMode(null)}
                             className="flex-1 py-1.5 text-xs font-medium text-slate-500 hover:bg-slate-100 rounded"
                           >
                             Cancel
                           </button>
                           <button 
                             onClick={() => callGemini('refine', aiPrompt)}
                             className="flex-1 py-1.5 text-xs font-medium bg-indigo-600 text-white hover:bg-indigo-700 rounded shadow-sm"
                           >
                             Generate
                           </button>
                        </div>
                     </div>
                  ) : (
                    <div className="space-y-2">
                      <button 
                        onClick={() => setAiMode('refine')}
                        className="w-full text-left p-2 hover:bg-slate-50 rounded-lg flex items-center gap-3 transition-colors group"
                      >
                        <div className="p-2 bg-indigo-100 text-indigo-600 rounded-md group-hover:bg-indigo-200">
                          <Wand2 size={18} />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-slate-800">Refine Sketch</p>
                          <p className="text-xs text-slate-500">Transform drawings into art</p>
                        </div>
                      </button>

<button 
                        onClick={() => callGemini('guess')}
                        className="w-full text-left p-2 hover:bg-slate-50 rounded-lg flex items-center gap-3 transition-colors group"
                      >
                         <div className="p-2 bg-pink-100 text-pink-600 rounded-md group-hover:bg-pink-200">
                          <Brain size={18} />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-slate-800">Guess Drawing</p>
                          <p className="text-xs text-slate-500">AI analyzes your sketch</p>
                        </div>
                      </button>

<button 
                        onClick={() => callGemini('inspire')}
                        className="w-full text-left p-2 hover:bg-slate-50 rounded-lg flex items-center gap-3 transition-colors group"
                      >
                         <div className="p-2 bg-amber-100 text-amber-600 rounded-md group-hover:bg-amber-200">
                          <Lightbulb size={18} />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-slate-800">Inspiration</p>
                          <p className="text-xs text-slate-500">Get a creative idea</p>
                        </div>
                      </button>
                    </div>
                  )}
                </div>
              )}
            </div>
            
             <div className="flex gap-1 md:hidden">
                <button 
                  onClick={handleUndo} 
                  disabled={historyStep <= 0}
                  className="p-2 text-slate-600 disabled:opacity-30 hover:bg-slate-100 rounded-full"
                >
                  <Undo size={20} />
                </button>
                <button 
                  onClick={handleRedo} 
                  disabled={historyStep >= history.length - 1}
                  className="p-2 text-slate-600 disabled:opacity-30 hover:bg-slate-100 rounded-full"
                >
                  <Redo size={20} />
                </button>
            </div>
          </div>

{/* Settings: Color & Size */}
          <div className="flex items-center gap-4 w-full md:w-auto overflow-x-auto pb-2 md:pb-0 scrollbar-hide">
            
            {/* Color Picker */}
            <div className="flex items-center gap-2 pr-4 border-r border-slate-200">
              {COLORS.map((c) => (
                <button
                  key={c}
                  onClick={() => { setTool('pen'); setColor(c); }}
                  className={`w-6 h-6 rounded-full border-2 transition-transform hover:scale-110 ${
                    color === c && tool !== 'eraser' ? 'border-slate-800 scale-110' : 'border-transparent'
                  }`}
                  style={{ backgroundColor: c }}
                  aria-label={`Select color ${c}`}
                />
              ))}
              <div className="relative group">
                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 cursor-pointer overflow-hidden border-2 border-transparent group-hover:scale-110 transition-transform flex items-center justify-center">
                    <Palette size={12} className="text-white" />
                </div>
                <input 
                    type="color" 
                    value={color}
                    onChange={(e) => { setTool('pen'); setColor(e.target.value); }}
                    className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                />
              </div>
            </div>

{/* Size Slider */}
            <div className="flex items-center gap-2 min-w-[120px]">
              <Minus size={14} className="text-slate-400" />
              <input
                type="range"
                min="1"
                max="50"
                value={brushSize}
                onChange={(e) => setBrushSize(parseInt(e.target.value))}
                className="w-24 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
              />
              <div 
                className="w-3 h-3 bg-slate-800 rounded-full transition-all"
                style={{ width: brushSize / 2, height: brushSize / 2 }}
              />
            </div>
          </div>

{/* Actions: Undo/Redo/Clean/Save */}
          <div className="flex items-center gap-2 ml-auto md:ml-0">
             {/* Desktop Undo/Redo */}
             <div className="hidden md:flex gap-1 border-r border-slate-200 pr-2 mr-2">
                <button 
                  onClick={handleUndo} 
                  disabled={historyStep <= 0}
                  className="p-2 text-slate-600 disabled:opacity-30 hover:bg-slate-100 rounded-full tooltip"
                  title="Undo (Ctrl+Z)"
                >
                  <Undo size={20} />
                </button>
                <button 
                  onClick={handleRedo} 
                  disabled={historyStep >= history.length - 1}
                  className="p-2 text-slate-600 disabled:opacity-30 hover:bg-slate-100 rounded-full tooltip"
                  title="Redo (Ctrl+Y)"
                >
                  <Redo size={20} />
                </button>
            </div>

<button
              onClick={clearCanvas}
              className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
            >
              <Trash2 size={18} />
              <span className="hidden lg:inline">Clear</span>
            </button>
            <button
              onClick={downloadCanvas}
              className="py-2 px-4 bg-slate-900 text-white hover:bg-slate-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium shadow-sm"
            >
              <Download size={18} />
              <span className="hidden lg:inline">Export</span>
            </button>
          </div>

</div>
      </div>

{/* Main Canvas Area */}
      <div 
        ref={containerRef} 
        className="flex-1 relative cursor-crosshair bg-slate-50 touch-none"
      >
        <canvas
          ref={canvasRef}
          onMouseDown={startDrawing}
          onMouseMove={draw}
          onMouseUp={stopDrawing}
          onMouseLeave={stopDrawing}
          onTouchStart={startDrawing}
          onTouchMove={draw}
          onTouchEnd={stopDrawing}
          className="absolute inset-0 shadow-inner"
        />
        
        {historyStep === -1 && !aiLoading && (
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-40">
                <div className="text-center">
                    <p className="text-slate-400 text-lg font-medium">Start drawing something...</p>
                </div>
            </div>
        )}
      </div>
    </div>
  );
}</article></body></html>

Digital Whiteboard