Add prompt input state

This commit is contained in:
Hayk Martiros 2022-11-23 22:08:00 -08:00
parent 23f1e62608
commit 1c575a84de
3 changed files with 52 additions and 8 deletions

View File

@ -1,7 +1,14 @@
import { NextComponentType } from 'next'
import PromptEntry from './PromptEntry'
const PromptPanel: NextComponentType = () => {
import { PromptInput } from "../types";
interface PromptPanelProps {
prompts: PromptInput[];
addPrompt: (prompt: string, seed: number) => void;
}
const PromptPanel = (props: PromptPanelProps) => {
const prompts = props.prompts;
const addPrompt = props.addPrompt;
return (
<>

View File

@ -1,16 +1,24 @@
import Head from "next/head";
import { useState } from "react";
import ThreeCanvas from "../components/ThreeCanvas";
import PromptPanel from "../components/PromptPanel";
import Settings from '../components/Settings'
import Pause from '../components/Pause'
import Settings from "../components/Settings";
import Pause from "../components/Pause";
import { InferenceResult, PromptInput } from "../types";
const defaultPromptInputs = [
{ prompt: "A jazz pianist playing a classical concerto", seed: 10 },
{ prompt: "Taylor Swift singing with a tropical beat", seed: 10 },
];
export default function Home() {
const [paused, setPaused] = useState(false);
const [promptInputs, setPromptInputs] =
useState<PromptInput[]>(defaultPromptInputs);
return (
<>
<Head>
@ -27,12 +35,16 @@ export default function Home() {
<ThreeCanvas paused={paused} />
</div>
<PromptPanel />
<PromptPanel
prompts={promptInputs}
addPrompt={(prompt: string, seed: number) => {
setPromptInputs([...promptInputs, { prompt: prompt, seed: seed }]);
}}
/>
<Settings />
<Pause paused={paused} setPaused={setPaused} />
</div>
</>
);

25
types.ts Normal file
View File

@ -0,0 +1,25 @@
export interface PromptInput {
prompt: string;
seed: number;
denoising?: number;
guidance?: number;
}
export interface InferenceInput {
alpha: number;
// num_inference_steps: number;
// seed_image_id: number;
start: PromptInput;
end: PromptInput;
}
export interface InferenceResult {
input: InferenceInput;
// URL of the image
image: string;
// URL of the audio
audio: string;
}