diff --git a/components/PromptEntry.tsx b/components/PromptEntry.tsx
index d315bb1..5b8e790 100644
--- a/components/PromptEntry.tsx
+++ b/components/PromptEntry.tsx
@@ -1,5 +1,6 @@
-import { PlayingState } from "../types";
+import { InferenceInput, InferenceResult, PlayingState } from "../types";
import { IoMdClose } from "react-icons/io";
+import Pause from "./Pause";
interface PromptEntryProps {
prompt: string;
@@ -7,6 +8,9 @@ interface PromptEntryProps {
className: string;
playingState: PlayingState;
resetCallback: () => void;
+ inferenceResults: InferenceResult[];
+ nowPlayingResult: InferenceResult;
+ setPaused: (value: boolean) => void;
}
export default function PromptEntry({
@@ -15,68 +19,117 @@ export default function PromptEntry({
className,
playingState,
resetCallback,
+ inferenceResults,
+ nowPlayingResult,
+ setPaused
}: PromptEntryProps) {
+
const getPromptCopy = (prompt: string) => {
switch (playingState) {
case PlayingState.UNINITIALIZED:
case PlayingState.SAME_PROMPT:
switch (index) {
case 0:
- return prompt;
+ return (
+
{ jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ );
case 1:
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ );
case 2:
+ // active prompt
if (prompt == " " || prompt == "") {
return {""};
} else {
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ )
}
case 3:
if (prompt == " " || prompt == "") {
- return "...";
+ return ...
} else {
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ )
}
case 4:
if (prompt == " " || prompt == "") {
- return "UP NEXT: Anything you want";
+ return UP NEXT: Anything you want
;
} else {
- return "UP NEXT: " + prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
UP NEXT: {prompt}
+
+ )
}
default: {
console.log("UNHANDLED default");
- return prompt;
+ return {prompt}
;
}
}
case PlayingState.TRANSITION:
switch (index) {
case 0:
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ );
case 1:
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ );
case 2:
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ )
case 3:
if (prompt == " " || prompt == "") {
- return "< enter prompt >";
+ return -enter prompt-
;
} else {
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
{prompt}
+
+ )
}
case 4:
if (prompt == " " || prompt == "") {
- return "...";
+ return ...
;
} else {
- return prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
UP NEXT: {prompt}
+
+ )
}
case 5:
if (prompt == " " || prompt == "") {
- return "UP NEXT: Anything you want";
+ return UP NEXT: Anything you want
;
} else {
- return "UP NEXT: " + prompt;
+ return (
+ { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
+
UP NEXT: {prompt}
+
+ )
}
default: {
console.log("UNHANDLED default");
- return prompt;
+ return {prompt}
;
}
}
}
@@ -84,7 +137,8 @@ export default function PromptEntry({
return (
-
{getPromptCopy(prompt)}
+ {getPromptCopy(prompt)}
+
{/* TODO(hayk): Re-enable this when it's working. */}
{/* {index == 2 ? (
) : null} */}
-
+
);
}
+
+export function jumpToPrompt(prompt: String, inferenceResults: InferenceResult[], setPaused: (value: boolean) => void, nowPlayingResult?: InferenceResult) {
+
+ // Pause player since this function will open new tab that user will interact with
+ setPaused(true)
+
+ let firstTimePromptAppears = -1;
+ for (let i = 0; i < inferenceResults.length; i++) {
+ if (inferenceResults[i].input.start.prompt === prompt) {
+ firstTimePromptAppears = i;
+ break;
+ }
+ }
+ if (firstTimePromptAppears == -1) {
+ let url = generateLinkToUpcomingPrompt(prompt, nowPlayingResult)
+ window.open(url, "_blank").focus();
+ }
+ else {
+ let url = generateLinkToPreviousInput(inferenceResults[firstTimePromptAppears].input)
+ window.open(url, "_blank").focus();
+ }
+}
+
+export function generateLinkToUpcomingPrompt(prompt, nowPlayingResult?: InferenceResult) {
+
+ var promptString = "&prompt=" + prompt;
+ promptString = promptString.replace(/ /g, "+");
+
+ if (nowPlayingResult != null) {
+ var denoisingString = "&denoising=" + nowPlayingResult.input.start.denoising;
+ var seedImageIdString = "&seedImageId=" + nowPlayingResult.input.seed_image_id;
+ } else {
+ denoisingString = "";
+ seedImageIdString = "";
+ }
+
+ var baseUrl = window.location.origin + "/?";
+ var url = baseUrl + promptString + denoisingString + seedImageIdString;
+ return url;
+}
+
+// Todo: DRY this and share functions
+export function generateLinkToPreviousInput(selectedInput: InferenceInput) {
+ var prompt;
+ var seed;
+ var denoising;
+ var maskImageId;
+ var seedImageId;
+ var guidance;
+ var numInferenceSteps;
+ var alphaVelocity;
+
+ prompt = selectedInput.start.prompt;
+ seed = selectedInput.start.seed;
+ denoising = selectedInput.start.denoising;
+ maskImageId = selectedInput.mask_image_id;
+ seedImageId = selectedInput.seed_image_id;
+
+ var baseUrl = window.location.origin + "/?";
+
+ if (prompt != null) {
+ var promptString = "&prompt=" + prompt;
+ } else {
+ promptString = "";
+ }
+ if (seed != null) {
+ var seedString = "&seed=" + seed;
+ } else {
+ seedString = "";
+ }
+ if (denoising != null) {
+ var denoisingString = "&denoising=" + denoising;
+ } else {
+ denoisingString = "";
+ }
+ if (maskImageId != null) {
+ var maskImageIdString = "&maskImageId=" + maskImageId;
+ } else {
+ maskImageIdString = "";
+ }
+ if (seedImageId != null) {
+ var seedImageIdString = "&seedImageId=" + seedImageId;
+ } else {
+ seedImageIdString = "";
+ }
+ if (guidance != null) {
+ var guidanceString = "&guidance=" + guidance;
+ } else {
+ guidanceString = "";
+ }
+ if (numInferenceSteps != null) {
+ var numInferenceStepsString = "&numInferenceSteps=" + numInferenceSteps;
+ } else {
+ numInferenceStepsString = "";
+ }
+ if (alphaVelocity != null) {
+ var alphaVelocityString = "&alphaVelocity=" + alphaVelocity;
+ } else {
+ alphaVelocityString = "";
+ }
+
+ // Format strings to have + in place of spaces for ease of sharing, note this is only necessary for prompts currently
+ promptString = promptString.replace(/ /g, "+");
+
+ // create url string with the variables above combined
+ var shareUrl =
+ baseUrl +
+ promptString +
+ seedString +
+ denoisingString +
+ maskImageIdString +
+ seedImageIdString +
+ guidanceString +
+ numInferenceStepsString +
+ alphaVelocityString;
+
+ return shareUrl;
+}
\ No newline at end of file
diff --git a/components/PromptPanel.tsx b/components/PromptPanel.tsx
index dc2a547..e6d275b 100644
--- a/components/PromptPanel.tsx
+++ b/components/PromptPanel.tsx
@@ -10,6 +10,7 @@ interface PromptPanelProps {
appState: AppState;
changePrompt: (prompt: string, index: number) => void;
resetCallback: () => void;
+ setPaused: (paused: boolean) => void;
}
export default function PromptPanel({
@@ -19,6 +20,7 @@ export default function PromptPanel({
appState,
changePrompt,
resetCallback,
+ setPaused,
}: PromptPanelProps) {
const inputPrompt = useRef(null);
@@ -150,12 +152,15 @@ export default function PromptPanel({
{getDisplayPrompts().map((prompt, index) => (
))}
@@ -194,6 +199,10 @@ export default function PromptPanel({
);
}
+export function refreshPage() {
+ window.location.reload();
+}
+
const promptEntryClassNameDict = {
0: "font-extralight text-xs text-gray-500 text-opacity-20",
1: "font-extralight text-xs text-gray-400 text-opacity-20",
diff --git a/pages/index.tsx b/pages/index.tsx
index e8de887..579ae28 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,7 @@ import Pause from "../components/Pause";
import PromptPanel from "../components/PromptPanel";
import ThreeCanvas from "../components/ThreeCanvas";
-import { samplePrompts } from "../prompts";
+import { samplePrompts, initialSeeds, initialSeedImageMap } from "../prompts";
import {
AppState,
@@ -22,10 +22,6 @@ import {
PromptInput,
} from "../types";
-function getRandomInt(max: number) {
- return Math.floor(Math.random() * max);
-}
-
function getRandomFromArray(arr: any[], n: number) {
var result = new Array(n),
len = arr.length,
@@ -51,11 +47,11 @@ export default function Home() {
const [alpha, setAlpha] = useState(0.0);
const [alphaRollover, setAlphaRollover] = useState(false);
const [alphaVelocity, setAlphaVelocity] = useState(0.25);
- const [seed, setSeed] = useState(getRandomInt(1000000));
// Settings
const [denoising, setDenoising] = useState(0.75);
- const [seedImageId, setSeedImageId] = useState("og_beat");
+ const [seedImageId, setSeedImageId] = useState(initialSeeds[Math.floor(Math.random() * initialSeeds.length)]);
+ const [seed, setSeed] = useState(initialSeedImageMap[seedImageId][Math.floor(Math.random() * initialSeedImageMap[seedImageId].length)]);
// Prompts shown on screen and maintained by the prompt panel
const [promptInputs, setPromptInputs] = useState([]);
@@ -330,10 +326,14 @@ export default function Home() {
newPromptInputs[index].prompt = prompt;
setPromptInputs(newPromptInputs);
}}
+ setPaused={setPaused}
resetCallback={resetCallback}
/>
-
+