import { UploadIcon } from '@heroicons/react/outline' import { Editor } from '@tiptap/react' import { useState } from 'react' import { AlertBox } from '../alert-box' import { Button } from '../button' import { FileUploadButton } from '../file-upload-button' import { Col } from '../layout/col' import { Modal } from '../layout/modal' import { Row } from '../layout/row' import { Tabs } from '../layout/tabs' const MODIFIERS = '8k, beautiful, illustration, trending on art station, picture of the day, epic composition' export function ImageModal(props: { editor: Editor | null // TODO: Type this correctly? upload: any open: boolean setOpen: (open: boolean) => void }) { const { upload, open, setOpen } = props return ( { setOpen(false) upload.mutate(files) }} className="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" > Upload an image file ), }, { title: 'Dream', content: , }, ]} /> ) } // Note: this is currently tied to a DreamStudio API key tied to akrolsmir@gmail.com, // and injected on Vercel. const API_KEY = process.env.NEXT_PUBLIC_DREAM_KEY function DreamTab(props: { editor: Editor | null open: boolean setOpen: (open: boolean) => void }) { const { editor, setOpen } = props const [input, setInput] = useState('') const [isDreaming, setIsDreaming] = useState(false) const [imageUrl, setImageUrl] = useState('') const imageCode = `${input}` if (!API_KEY) { return ( ) } async function dream() { setIsDreaming(true) const data = { prompt: input + ', ' + MODIFIERS, apiKey: API_KEY, } const response = await fetch(`/api/v0/dream`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), }) const json = await response.json() setImageUrl(json.url) setIsDreaming(false) } return ( setInput(e.target.value)} autoComplete="off" /> {isDreaming && (
This may take ~10 seconds...
)} {/* TODO: Allow the user to choose their own modifiers */}
Commission a custom image using AI.
Modifiers: {MODIFIERS}
{/* Show the current imageUrl */} {/* TODO: Keep the other generated images, so the user can play with different attempts. */} {imageUrl && ( <> Image )} ) }