Spaces:
Running
Running
File size: 4,056 Bytes
21d7fc3 57d523a 21d7fc3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import Image from 'next/image';
import ExampleChip from './ExampleChip';
import SystemPrompt from './SystemPrompt';
import { examples } from '../sketches';
export default function GenerationForm({
word,
setWord,
instructions,
setInstructions,
isGenerating,
showSystemPrompt,
setShowSystemPrompt,
showExamples,
setShowExamples,
activeExample,
handleExampleClick,
onSubmit
}) {
return (
<div className="w-full max-w-[500px]">
<button
onClick={() => setShowExamples(!showExamples)}
className="flex items-center mt-4 gap-2 text-sm text-black hover:text-black"
>
<svg
className={`w-4 h-4 transition-transform ${showExamples ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
See examples we used to teach the model
</button>
{showExamples && (
<div className="flex gap-2 flex-wrap mt-4">
{Object.keys(examples).map((example) => (
<ExampleChip
key={example}
label={example}
onClick={() => handleExampleClick(example)}
active={activeExample === example}
/>
))}
</div>
)}
{showSystemPrompt && (
<SystemPrompt onExampleClick={handleExampleClick} />
)}
<form onSubmit={onSubmit} className="w-full max-w-[500px] flex flex-col gap-4 items-center mt-4">
<div className="relative w-full">
<input
type="text"
value={word}
onChange={(e) => setWord(e.target.value)}
maxLength={20}
placeholder='Type a word like "float" ...'
className="w-full p-3 sm:p-4 bg-transparent border-[1.5px] border-gray-200 rounded-[26px] text-black placeholder-gray-400 focus:outline-none focus:border-black text-xs sm:text-base"
/>
<button
type="button"
className={`group absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black transition-colors p-1.5 rounded-full ${showSystemPrompt ? 'bg-gray-200' : 'hover:bg-gray-100'} active:bg-gray-200`}
onClick={() => setShowSystemPrompt(!showSystemPrompt)}
>
<Image
src="/info_spark.png"
alt="show system prompt"
width={20}
height={20}
className="opacity-100"
priority={false}
/>
<div className="absolute bottom-full mb-1 right-0 scale-0 transition-all rounded bg-gray-100 p-2 text-xs text-black group-hover:scale-100 whitespace-nowrap">
{showSystemPrompt ? 'Hide' : 'Show'} system prompt
</div>
</button>
</div>
<textarea
value={instructions}
onChange={(e) => setInstructions(e.target.value)}
placeholder="Optional: add additional instructions for your animation."
rows={1}
className="w-full p-3 sm:p-4 bg-transparent border-[1.5px] border-gray-200 resize-none rounded-[26px] text-black placeholder-gray-400 focus:outline-none focus:border-black text-xs sm:text-base"
style={{
height: 'auto',
}}
onInput={(e) => {
e.target.style.height = 'auto';
e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
}}
/>
<button
type="submit"
disabled={isGenerating || !word.trim()}
className={`w-44 py-3 rounded-[32px] font-medium transition-colors ${
isGenerating
? 'bg-[#EEEEEE] text-black'
: !word.trim()
? 'bg-gray-100 text-gray-400'
: 'bg-black text-white hover:bg-gray-900'
}`}
>
{isGenerating ? 'Generating...' : 'Generate'}
</button>
</form>
</div>
);
} |