├── public ├── og-image.png ├── vercel.svg └── next.svg ├── src ├── app │ ├── favicon.ico │ ├── components │ │ ├── let-me-guess.tsx │ │ ├── draw-canvas.tsx │ │ ├── top-commands.tsx │ │ ├── top-chrome.tsx │ │ ├── palette-bar.tsx │ │ ├── pen-and-eraser-bar.tsx │ │ └── enter-key.tsx │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── models │ └── index.ts ├── providers │ ├── keys-provider.tsx │ ├── let-me-guess-provider.tsx │ └── draw-editor-provider.tsx ├── hooks │ ├── use-viewport-size.ts │ ├── use-llava.ts │ ├── use-llama-vision.ts │ ├── use-llm.ts │ ├── use-undo-redo.ts │ ├── use-keyboard-shortcut.ts │ └── use-localstorage.ts ├── components │ ├── ui │ │ ├── textarea.tsx │ │ ├── input.tsx │ │ ├── separator.tsx │ │ ├── slider.tsx │ │ └── button.tsx │ ├── slider-vertical.tsx │ └── groq-logo.tsx └── lib │ ├── provider-factory.tsx │ └── utils.ts ├── next.config.mjs ├── postcss.config.mjs ├── biome.json ├── components.json ├── .gitignore ├── tsconfig.json ├── package.json ├── README.md ├── tailwind.config.ts └── pnpm-lock.yaml /public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jose-mdz/draw-and-guess/HEAD/public/og-image.png -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jose-mdz/draw-and-guess/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/models/index.ts: -------------------------------------------------------------------------------- 1 | interface Message { 2 | role: string; 3 | content: string | null; 4 | image?: string; 5 | } 6 | 7 | interface Keys { 8 | groqApiKey: string; 9 | } 10 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json", 3 | "organizeImports": { 4 | "enabled": true 5 | }, 6 | "linter": { 7 | "enabled": true, 8 | "rules": { 9 | "recommended": true 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/providers/keys-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import useLocalStorage from "@/hooks/use-localstorage"; 3 | import { providerFactory } from "../lib/provider-factory"; 4 | 5 | const [KeysProvider, useKeys] = providerFactory(() => { 6 | const [keys, setKeys] = useLocalStorage("kingdom_keys", null); 7 | 8 | return { 9 | keys, 10 | setKeys, 11 | }; 12 | }); 13 | 14 | export { KeysProvider, useKeys }; 15 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /src/hooks/use-viewport-size.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | export function useViewportSize() { 4 | const [width, setWidth] = useState(window.innerWidth); 5 | const [height, setHeight] = useState(window.innerHeight); 6 | 7 | useEffect(() => { 8 | const handleResize = () => { 9 | setWidth(window.innerWidth); 10 | setHeight(window.innerHeight); 11 | }; 12 | 13 | window.addEventListener("resize", handleResize); 14 | 15 | return () => { 16 | window.removeEventListener("resize", handleResize); 17 | }; 18 | }, []); 19 | 20 | return { width, height }; 21 | } 22 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /src/hooks/use-llava.ts: -------------------------------------------------------------------------------- 1 | import Groq from "groq-sdk"; 2 | 3 | export function useLlava(apiKey: string) { 4 | const groq = new Groq({ 5 | apiKey, 6 | dangerouslyAllowBrowser: true, 7 | }); 8 | 9 | function callLlava(prompt: string, image_url: string) { 10 | return groq.chat.completions.create({ 11 | messages: [ 12 | { 13 | role: "user", 14 | content: [ 15 | { type: "text", text: prompt }, 16 | { 17 | type: "image_url", 18 | image_url: { url: image_url }, 19 | // biome-ignore lint/suspicious/noExplicitAny: SDK not updated 20 | } as any, 21 | ], 22 | }, 23 | ], 24 | temperature: 0, 25 | model: "llava-v1.5-7b-4096-preview", 26 | max_tokens: 300, 27 | }); 28 | } 29 | 30 | return { 31 | callLlava, 32 | }; 33 | } 34 | -------------------------------------------------------------------------------- /src/app/components/let-me-guess.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { DrawCanvas } from "../components/draw-canvas"; 3 | import { DrawEditorProvider } from "@/providers/draw-editor-provider"; 4 | import { TopCommands } from "./top-commands"; 5 | import { PaletteBar } from "./palette-bar"; 6 | import { PenAndEraserBar } from "./pen-and-eraser-bar"; 7 | import { useLetMeGuess } from "@/providers/let-me-guess-provider"; 8 | import { TopChrome } from "./top-chrome"; 9 | 10 | export function LetMeGuess() { 11 | const { setCurrentImage } = useLetMeGuess(); 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/hooks/use-llama-vision.ts: -------------------------------------------------------------------------------- 1 | import Groq from "groq-sdk"; 2 | 3 | export function useLlamaVision(apiKey: string) { 4 | const groq = new Groq({ 5 | apiKey, 6 | dangerouslyAllowBrowser: true, 7 | }); 8 | 9 | function callLlamaVision(prompt: string, image_url: string) { 10 | return groq.chat.completions.create({ 11 | messages: [ 12 | { 13 | role: "user", 14 | content: [ 15 | { type: "text", text: prompt }, 16 | { 17 | type: "image_url", 18 | image_url: { url: image_url }, 19 | // biome-ignore lint/suspicious/noExplicitAny: SDK not updated 20 | } as any, 21 | ], 22 | }, 23 | ], 24 | temperature: 0, 25 | model: "llama-3.2-11b-vision-preview", 26 | max_tokens: 300, 27 | }); 28 | } 29 | 30 | return { 31 | callLlamaVision, 32 | }; 33 | } 34 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |