[ { "path": ".gitignore", "content": "node_modules/\ndist/\ndist-ssr/\n\n__pycache__/\n.venv/\nvenv/\n\n.DS_Store\n" }, { "path": "README.md", "content": "# turbo.art\n\nA playground for creative exploration that uses [SDXL Turbo](https://huggingface.co/stabilityai/sdxl-turbo) for real-time image editing. Try it now at [https://turbo.art](https://turbo.art)!\n\n![turbo-art](https://github.com/modal-labs/turbo-art/assets/5786378/bb185f24-9946-4c26-a7ca-7c8732ea77f0)\n\nThe entire app is serverless and hosted on [Modal](https://modal.com/).\n\n## Developing locally\n\n### File structure\n\n- [turbo_art.py](./turbo_art.py) - model endpoint and FastAPI web server (<150 lines of code!)\n- [src/](./src) - Svelte frontend\n\n### Requirements\n\nTo run this for yourself, you will need:\n\n1. Modal installed and set up locally, as well as FastAPI\n\n```shell\npip install modal fastapi\nmodal setup\n```\n\n2. [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed\n\n### Iterate\n\nDuring development, it's useful to have both the frontend and the Modal application automatically react to changes in the code. To do this, you'll need to run two processes.\n\nFirst, in one shell session, run:\n\n```shell\nnpm install\nnpm run build:watch\n```\n\nThen, in another shell session, run:\n\n```shell\nmodal serve turbo_art.py\n```\n\nIn the terminal output, you'll find a URL that you can visit to use your app. While the [`modal serve`](<(https://modal.com/docs/guide/webhooks#developing-with-modal-serve)>) process is running, changes to any of the project files will be automatically applied. `Ctrl+C` will stop the app.\n\n### Deploy\n\nOnce you're happy with your changes, [deploy](https://modal.com/docs/guide/managing-deployments#creating-deployments) your app:\n\n```shell\nnpm run build\nmodal deploy turbo_art.py\n```\n\nIn the terminal output, you'll find a different URL that you can visit to use your app. We chose to use Modal's [custom domains](https://modal.com/docs/guide/webhooks#custom-domains) feature to make the URL more memorable. Without a custom domain, you can still [select](https://modal.com/docs/guide/webhook-urls#user-specified-urls) part of the the `modal.run` subdomain you're assigned.\n\nNote that leaving the app deployed on Modal doesn't cost you anything! Modal apps are serverless and scale to 0 when not in use.\n" }, { "path": "index.html", "content": "\n\n \n \n \n \n \n\n \n \n\n \n \n \n \n \n \n Turbo.Art\n \n \n\n \n
\n \n \n\n" }, { "path": "package.json", "content": "{\n \"name\": \"turbo-art\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"build:watch\": \"vite build --watch\",\n \"preview\": \"vite preview\",\n \"check\": \"svelte-check --tsconfig ./tsconfig.json\"\n },\n \"devDependencies\": {\n \"@sveltejs/vite-plugin-svelte\": \"^5.0.3\",\n \"@tsconfig/svelte\": \"^5.0.2\",\n \"@types/node\": \"^22.15.19\",\n \"@types/throttle-debounce\": \"^5.0.2\",\n \"autoprefixer\": \"^10.4.16\",\n \"color-picker-svelte\": \"^1.4.0\",\n \"svelte\": \"^5.30.2\",\n \"svelte-check\": \"^4.2.1\",\n \"tailwindcss\": \"^3.4.17\",\n \"tslib\": \"^2.6.2\",\n \"typescript\": \"^5.2.2\",\n \"vite\": \"^6.3.5\"\n },\n \"dependencies\": {\n \"@types/three\": \"^0.176.0\",\n \"lucide-svelte\": \"^0.511.0\",\n \"paper\": \"^0.12.17\",\n \"postprocessing\": \"^6.33.4\",\n \"three\": \"^0.159.0\",\n \"throttle-debounce\": \"^5.0.0\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "import tailwind from \"tailwindcss\";\nimport tailwindConfig from \"./tailwind.config.js\";\nimport autoprefixer from \"autoprefixer\";\n\nexport default {\n plugins: [tailwind(tailwindConfig), autoprefixer],\n};\n" }, { "path": "src/App.svelte", "content": "\n\n
\n
\n \n
\n
\n \"Turbo.Art\"\n \n View Code\n \n
\n
\n The image generation is powered by Stability's SDXL Turbo\n
\n
\n\n
\n

Prompt

\n
\n {#each promptOptions as item}\n setPrompt(item)}>{item}\n {/each}\n
\n \n
\n\n
\n \n
\n
\n Canvas\n {#if isLoading}\n \n {/if}\n
\n
Draw on the image to generate a new one
\n
\n\n
\n
\n \n \n
\n {#if isMobile}\n \n {/if}\n
\n {\n paper.project.activeLayer.removeChildren();\n paper.view.update();\n generateOutputImage();\n }}\n on:setPaint={setPaint}\n on:setBrushSize={setBrushSize}\n />\n
\n \n
\n
\n
\n
\n (currentImageName = name)}\n setPrompt={(v) => (value = v)}\n />\n
\n \n \n
\n \n Upload Image (JPG, PNG)\n
\n \n
\n\n
\n
\n
\n Output\n {#if isLoading}\n \n {/if}\n
\n
\n Generated Image (iterations: {numIterations})\n
\n
\n\n
\n {#if !isMobile}\n \n {/if}\n
\n \n
\n
\n
\n
\n \n\n \n
\n Built with \n
\n \n Get Started \n \n \n \n
\n\n\n" }, { "path": "src/app.css", "content": "/* #RefactorExamplesComponentsAndStyles */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n body {\n @apply bg-black;\n color-scheme: dark;\n text-rendering: optimizelegibility;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n * {\n @apply outline-transparent;\n }\n\n *:focus {\n outline: none;\n }\n}\n" }, { "path": "src/lib/ImageOutput.svelte", "content": "\n\n\n" }, { "path": "src/lib/Paint.svelte", "content": "\n\n
\n handleClearCanvas()}\n >\n Clear\n \n\n
\n
\n {#each palette as { hex, name }}\n handleSetPaint(hex)}\n class=\"circle\"\n class:circle-active={paint === hex}\n style:background={hex}\n >\n {/each}\n
\n\n
\n\n
\n \n \n \n \n
\n
\n
\n\n\n" }, { "path": "src/lib/PreviewImages.svelte", "content": "\n\n setCurrentImage(\"valley\")}\n on:click={() => setImage(valleyImage)}\n on:click={() => setPrompt(promptOptionsByImage[\"valley\"][0])}\n>\n \n\n setCurrentImage(\"puppy\")}\n on:click={() => setImage(puppyImage)}\n on:click={() => setPrompt(promptOptionsByImage[\"puppy\"][0])}\n>\n \n\n setCurrentImage(\"car\")}\n on:click={() => setImage(carImage)}\n on:click={() => setPrompt(promptOptionsByImage[\"car\"][0])}\n>\n \n\n setCurrentImage(\"abstract\")}\n on:click={() => setImage(abstractImage)}\n on:click={() => setPrompt(promptOptionsByImage[\"abstract\"][0])}\n>\n \n\n setCurrentImage(\"pasta\")}\n on:click={() => setImage(pastaImage)}\n on:click={() => setPrompt(promptOptionsByImage[\"pasta\"][0])}\n>\n \n\n\n\n" }, { "path": "src/lib/Tools.svelte", "content": "\n\n
\n
\n \n
\n \n
\n \n Enhance\n \n \n\n \n
\n\n\n" }, { "path": "src/main.ts", "content": "import { mount } from \"svelte\";\nimport App from \"./App.svelte\";\nimport \"./app.css\";\n\nconst app = mount(App, {\n target: document.getElementById(\"app\")!,\n});\n\nexport default app;\n" }, { "path": "src/vite-env.d.ts", "content": "/// \n/// \n" }, { "path": "svelte.config.js", "content": "import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'\n\nexport default {\n // Consult https://svelte.dev/docs#compile-time-svelte-preprocess\n // for more information about preprocessors\n preprocess: vitePreprocess(),\n}\n" }, { "path": "tailwind.config.js", "content": "import defaultTheme from \"tailwindcss/defaultTheme\";\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\"./index.html\", \"./src/**/*.{html,js,svelte,ts}\"],\n theme: {\n extend: {\n screens: {\n md: \"840px\",\n xl: \"1200px\",\n },\n colors: {\n // Theme colors\n primary: \"#7FEE64\",\n \"light-green\": \"#DDFFDC\",\n \"muted-yellow\": \"#FFEA71\",\n },\n fontFamily: {\n mono: [\"Fira Mono\", ...defaultTheme.fontFamily.mono],\n sans: [\"Inter Variable\", ...defaultTheme.fontFamily.sans],\n inter: [\"Inter Variable\", ...defaultTheme.fontFamily.sans],\n tosh: [\"Tosh Modal\", ...defaultTheme.fontFamily.sans],\n degular: [\"degular\", ...defaultTheme.fontFamily.sans],\n },\n\n // Global font modifications\n fontSize: {\n sm: [\n \"0.875rem\",\n {\n lineHeight: \"1.25rem\",\n letterSpacing: \"0.01em\",\n },\n ],\n },\n },\n },\n plugins: [],\n};\n" }, { "path": "tsconfig.json", "content": "{\n \"extends\": \"@tsconfig/svelte/tsconfig.json\",\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"useDefineForClassFields\": true,\n \"module\": \"ESNext\",\n \"resolveJsonModule\": true,\n /**\n * Typecheck JS in `.svelte` and `.js` files by default.\n * Disable checkJs if you'd like to use dynamic types in JS.\n * Note that setting allowJs false does not prevent the use\n * of JS in `.svelte` files.\n */\n \"allowJs\": true,\n \"checkJs\": true,\n \"isolatedModules\": true,\n \"paths\": {\n \"$lib\": [\"./src/lib\"], // aliased by SvelteKit\n \"$lib/*\": [\"./src/lib/*\"],\n }\n },\n \"include\": [\"src/**/*.ts\", \"src/**/*.js\", \"src/**/*.svelte\"],\n \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n" }, { "path": "tsconfig.node.json", "content": "{\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\"\n },\n \"include\": [\"vite.config.ts\"]\n}\n" }, { "path": "turbo_art.py", "content": "from pathlib import Path\n\nimport modal\nfrom fastapi import FastAPI, File, Form, Response, UploadFile\nfrom fastapi.staticfiles import StaticFiles\n\napp = modal.App(\"stable-diffusion-xl-turbo\")\n\nassets_path = Path(__file__).parent / \"dist\"\n\nweb_image = (\n modal.Image.debian_slim()\n .pip_install(\"jinja2\", \"fastapi[standard]\")\n .add_local_dir(assets_path, \"/assets\")\n)\n\n\ndef download_weights():\n from huggingface_hub import snapshot_download\n\n # Ignore files that we don't need to speed up download time.\n ignore = [\n \"*.bin\",\n \"*.onnx_data\",\n \"*/diffusion_pytorch_model.safetensors\",\n ]\n\n snapshot_download(\"stabilityai/sdxl-turbo\", ignore_patterns=ignore)\n\n # https://huggingface.co/docs/diffusers/main/en/using-diffusers/sdxl_turbo#speed-up-sdxl-turbo-even-more\n # vae is used for a inference speedup\n snapshot_download(\"madebyollin/sdxl-vae-fp16-fix\", ignore_patterns=ignore)\n\n\ninference_image = (\n modal.Image.debian_slim()\n .pip_install(\n \"Pillow~=10.1.0\",\n \"diffusers~=0.24\",\n \"transformers~=4.35\",\n \"accelerate~=0.25\",\n \"safetensors~=0.4\",\n \"fastapi[standard]\",\n )\n .run_function(download_weights)\n)\n\nwith inference_image.imports():\n from io import BytesIO\n\n import torch\n from diffusers import AutoencoderKL, AutoPipelineForImage2Image\n from diffusers.utils import load_image\n from PIL import Image\n\n\n@app.cls(\n gpu=\"A100\",\n image=inference_image,\n scaledown_window=240,\n max_containers=10,\n)\nclass Model:\n @modal.enter()\n def enter(self):\n self.pipe = AutoPipelineForImage2Image.from_pretrained(\n \"stabilityai/sdxl-turbo\",\n torch_dtype=torch.float16,\n device_map=\"balanced\",\n variant=\"fp16\",\n vae=AutoencoderKL.from_pretrained(\n \"madebyollin/sdxl-vae-fp16-fix\",\n torch_dtype=torch.float16,\n device_map=\"balanced\",\n ),\n )\n\n # We execute a blank inference since there are objects that are lazily loaded that\n # we want to start loading before an actual user query\n self.pipe(\n \"blank\",\n image=Image.new(\"RGB\", (800, 1280), (255, 255, 255)),\n num_inference_steps=1,\n strength=1,\n guidance_scale=0.0,\n seed=42,\n )\n\n @modal.fastapi_endpoint(method=\"POST\")\n async def inference(\n self,\n image: UploadFile = File(...),\n prompt: str = Form(...),\n num_iterations: str = Form(...),\n ):\n img_data_in = await image.read()\n\n init_image = load_image(Image.open(BytesIO(img_data_in))).resize((512, 512))\n # based on trial and error we saw the best results with 3 inference steps\n # it had better generation results than 4,5,6 even though it's faster\n num_inference_steps = int(num_iterations)\n # note: anything under 0.5 strength gives blurry results\n strength = 0.999 if num_iterations == 2 else 0.65\n assert num_inference_steps * strength >= 1\n\n image = self.pipe(\n prompt,\n image=init_image,\n num_inference_steps=num_inference_steps,\n strength=strength,\n guidance_scale=0.0,\n seed=42,\n ).images[0]\n\n byte_stream = BytesIO()\n image.save(byte_stream, format=\"jpeg\")\n img_data_out = byte_stream.getvalue()\n\n return Response(content=img_data_out, media_type=\"image/jpeg\")\n\n\n@app.function(image=web_image)\n@modal.concurrent(max_inputs=10)\n@modal.asgi_app()\ndef fastapi_app():\n import jinja2\n\n web_app = FastAPI()\n\n with open(\"/assets/index.html\", \"r\") as f:\n template_html = f.read()\n\n template = jinja2.Template(template_html)\n\n with open(\"/assets/index.html\", \"w\") as f:\n # Mount the {{ inference_url }} with the Modal inference endpoint.\n html = template.render(inference_url=Model.inference.web_url)\n f.write(html)\n\n web_app.mount(\"/\", StaticFiles(directory=\"/assets\", html=True))\n\n return web_app\n" }, { "path": "vite.config.ts", "content": "import postcss from \"./postcss.config.js\";\nimport { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport path from \"node:path\";\n\nexport default defineConfig({\n plugins: [svelte()],\n css: {\n postcss,\n },\n build: {\n minify: true,\n },\n server: {\n open: true,\n },\n resolve: {\n alias: {\n $lib: path.resolve(\"./src/lib\"),\n },\n },\n});\n" } ]