Update .eslintrc.json, .gitattributes, and 71 more files...

.eslintrc.json

@@ -1,4 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": { "react/no-unescaped-entities": 0 }
-}

.gitattributes

@@ -1,41 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
-public/about/astronaut.gif filter=lfs diff=lfs merge=lfs -text
-public/about/funky_sax.gif filter=lfs diff=lfs merge=lfs -text
-public/about/happy_cows_interpolation.gif filter=lfs diff=lfs merge=lfs -text
-public/about/img2img_example.png filter=lfs diff=lfs merge=lfs -text
-public/about/latent_space_interpolation.png filter=lfs diff=lfs merge=lfs -text
-public/about/spectrogram_label.png filter=lfs diff=lfs merge=lfs -text
-public/about/web_app_screenshot.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.env
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

Dockerfile

@@ -6,9 +6,8 @@ WORKDIR /app
 RUN chown -R app /app
 RUN chmod -R 777 /app
 USER app
-# RUN git clone https://github.com/riffusion/riffusion-app ./
-# COPY package.json package-lock.json ./
-COPY . ./
+RUN git clone https://github.com/riffusion/riffusion-app ./
+COPY package.json ./
 RUN npm ci
 COPY . .
 

LICENSE

@@ -1,16 +0,0 @@
-Copyright 2022 Hayk Martiros and Seth Forsgren
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
-associated documentation files (the "Software"), to deal in the Software without restriction,
-including without limitation the rights to use, copy, modify, merge, publish, distribute,
-sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial
-portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
-NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
-OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,10 +0,0 @@
----
-title: Test2
-emoji: 🌍
-colorFrom: purple
-colorTo: blue
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

components/AudioPlayer.tsx

@@ -1,133 +0,0 @@
-import { useEffect, useState } from "react";
-
-import * as Tone from "tone";
-
-import { InferenceResult } from "../types";
-
-interface AudioPlayerProps {
-  paused: boolean;
-  inferenceResults: InferenceResult[];
-  nowPlayingCallback: (result: InferenceResult, playerTime: number) => void;
-  playerIsBehindCallback: (isBehind: boolean) => void;
-}
-
-/**
- * Audio player with Tone.js
- *
- * TODO(hayk): Look into https://github.com/E-Kuerschner/useAudioPlayer as an alternative.
- */
-export default function AudioPlayer({
-  paused,
-  inferenceResults,
-  nowPlayingCallback,
-  playerIsBehindCallback,
-}: AudioPlayerProps) {
-  const [tonePlayer, setTonePlayer] = useState<Tone.Player>(null);
-
-  const [numClipsPlayed, setNumClipsPlayed] = useState(0);
-  const [prevNumClipsPlayed, setPrevNumClipsPlayed] = useState(0);
-
-  const [resultCounter, setResultCounter] = useState(0);
-
-  // On load, create a player synced to the tone transport
-  useEffect(() => {
-    if (tonePlayer) {
-      return;
-    }
-
-    if (inferenceResults.length === 0) {
-      return;
-    }
-
-    const result = inferenceResults[0];
-
-    const player = new Tone.Player(result.audio, () => {
-      player.loop = true;
-      player.sync().start(0);
-
-      // Set up a callback to increment numClipsPlayed at the edge of each clip
-      const bufferLength = player.sampleTime * player.buffer.length;
-
-      // TODO(hayk): Set this callback up to vary each time using duration_s
-      Tone.Transport.scheduleRepeat((time) => {
-        setNumClipsPlayed((n) => n + 1);
-      }, bufferLength);
-
-      setTonePlayer(player);
-
-      // Make further load callbacks do nothing.
-      player.buffer.onload = () => {};
-    }).toDestination();
-  }, [tonePlayer, inferenceResults]);
-
-  // On play/pause button, play/pause the audio with the tone transport
-  useEffect(() => {
-    if (!paused) {
-      if (Tone.context.state == "suspended") {
-        Tone.context.resume();
-      }
-
-      if (tonePlayer) {
-        Tone.Transport.start();
-      }
-    } else {
-      if (tonePlayer) {
-        Tone.Transport.pause();
-      }
-    }
-  }, [paused, tonePlayer]);
-
-  // If there is a new clip, switch to it
-  useEffect(() => {
-    if (numClipsPlayed == prevNumClipsPlayed) {
-      return;
-    }
-
-    const maxResultCounter = Math.max(
-      ...inferenceResults.map((r) => r.counter)
-    );
-
-    if (maxResultCounter < resultCounter) {
-      console.info(
-        "No new result available, looping previous clip",
-        resultCounter,
-        maxResultCounter
-      );
-      playerIsBehindCallback(true);
-      return;
-    }
-
-    playerIsBehindCallback(false);
-
-    const result = inferenceResults.find(
-      (r: InferenceResult) => r.counter == resultCounter
-    );
-
-    setResultCounter((c) => c + 1);
-
-    tonePlayer.load(result.audio).then(() => {
-      // Re-jigger the transport so it stops playing old buffers. It seems like this doesn't
-      // introduce a gap, but watch out for that.
-      Tone.Transport.pause();
-      if (!paused) {
-        Tone.Transport.start();
-      }
-
-      const playerTime = Tone.Transport.seconds;
-      nowPlayingCallback(result, playerTime);
-    });
-
-    setPrevNumClipsPlayed(numClipsPlayed);
-  }, [
-    numClipsPlayed,
-    prevNumClipsPlayed,
-    resultCounter,
-    inferenceResults,
-    paused,
-    nowPlayingCallback,
-    playerIsBehindCallback,
-    tonePlayer,
-  ]);
-
-  return null;
-}

components/DebugView.tsx

@@ -1,88 +0,0 @@
-import { Dialog } from "@headlessui/react";
-import { useState } from "react";
-import { ImStatsBars } from "react-icons/im";
-import styled from "styled-components";
-
-import { InferenceResult, PromptInput } from "../types";
-
-interface DebugViewProps {
-  promptInputs: PromptInput[];
-  inferenceResults: InferenceResult[];
-  nowPlayingResult: InferenceResult;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-const ModalContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export default function DebugView({
-  promptInputs,
-  inferenceResults,
-  nowPlayingResult,
-  open,
-  setOpen,
-}: DebugViewProps) {
-  return (
-    <>
-      <Dialog
-        open={open}
-        onClose={() => setOpen(false)}
-        as="div"
-        className="fixed inset-0 z-30"
-        key="debug-dialog"
-      >
-        <ModalContainer key="debug-modal">
-          <div className="px-4 text-center text-sm whitespace-nowrap h-[40rem] w-[70rem] overflow-x-scroll">
-            <div className="my-8 inline-block transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-              <Dialog.Panel>
-                <h2 className="text-xl font-medium leading-6 text-gray-900 pb-2">
-                  Prompt Inputs
-                </h2>
-                <div className="mt-4 font-mono">
-                  {promptInputs.map((promptInput) => (
-                    <div key={promptInput.prompt}>
-                      "{promptInput.prompt}" - {promptInput.transitionCounter}
-                    </div>
-                  ))}
-                </div>
-                <h2 className="text-xl font-medium leading-6 text-gray-900 pb-2">
-                  Inference Results
-                </h2>
-                <div className="mt-4 font-mono">
-                  <ul>
-                    {inferenceResults.map((result) => (
-                      <li
-                        key={result.counter}
-                        className={
-                          result.counter === nowPlayingResult?.counter
-                            ? "text-red-700"
-                            : "text-black"
-                        }
-                      >
-                        <b>#{result.counter}</b> - Alpha{" "}
-                        {result.input.alpha.toFixed(2)} from ("
-                        {result.input.start.prompt}", {result.input.start.seed})
-                        to ("
-                        {result.input.end.prompt}", {result.input.end.seed})
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </Dialog.Panel>
-            </div>
-          </div>
-        </ModalContainer>
-      </Dialog>
-    </>
-  );
-}

components/FallingBehindWarning.tsx

@@ -1,12 +0,0 @@
-export default function FallingBehindWarning() {
-  return (
-    <div
-      className="fixed z-20 top-8 left-12 bg-yellow-50 border border-yellow-600 text-yellow-700 px-4 py-3 rounded"
-      role="alert"
-    >
-      <span className="block sm:inline mr-8">
-        <b>Uh oh!</b> Servers are behind, scaling up...
-      </span>
-    </div>
-  );
-}

components/HeightMapImage.tsx

@@ -1,52 +0,0 @@
-import { DoubleSide, RepeatWrapping, sRGBEncoding } from "three";
-import {
-  useTexture,
-} from "@react-three/drei";
-
-import { vertexShader, fragmentShader } from "../shaders";
-
-interface HeightMapImageProps {
-    url: string;
-    position: [number, number, number];
-    rotation: [number, number, number];
-    scale: [number, number, number];
-  }
-
-export default function HeightMapImage(props: HeightMapImageProps) {
-  const url = props.url;
-
-  // Load the heightmap image
-  const heightMap = useTexture(url);
-  heightMap.wrapS = RepeatWrapping;
-  heightMap.wrapT = RepeatWrapping;
-
-  // Load the texture map
-  const textureMap = useTexture(url);
-  textureMap.wrapS = RepeatWrapping;
-  textureMap.wrapT = RepeatWrapping;
-
-  return (
-    <mesh
-      position={props.position}
-      rotation={props.rotation}
-      scale={props.scale}
-    >
-      {/* TODO hayk reduce */}
-      <planeGeometry args={[1, 1, 256, 256]} />
-      <shaderMaterial
-        uniforms={{
-          // Feed the heightmap
-          bumpTexture: { value: heightMap },
-          // Feed the scaling constant for the heightmap
-          bumpScale: { value: -0.5 },
-          // Feed the texture map
-          terrainTexture: { value: textureMap },
-        }}
-        // Feed the shaders as strings
-        vertexShader={vertexShader}
-        fragmentShader={fragmentShader}
-        side={DoubleSide}
-      />
-    </mesh>
-  );
-}

components/ImagePlane.tsx

@@ -1,25 +0,0 @@
-import * as THREE from "three";
-import React, { Suspense } from "react";
-import { useLoader } from "@react-three/fiber";
-
-interface ImagePlaneProps {
-  url: string;
-  height: number;
-  duration: number;
-}
-
-/**
- * Draw an image on a plane geometry.
- */
-export default function ImagePlane(props: ImagePlaneProps) {
-  const texture = useLoader(THREE.TextureLoader, props.url);
-
-  return (
-    <Suspense fallback={null}>
-      <mesh rotation-z={-Math.PI / 2} position-y={props.height}>
-        <planeGeometry attach="geometry" args={[props.duration, 5]} />
-        <meshBasicMaterial attach="material" map={texture} />
-      </mesh>
-    </Suspense>
-  );
-}

components/Info.tsx

@@ -1,119 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-import { FiInfo } from "react-icons/fi";
-import styled, { css } from "styled-components";
-
-const ModalContainer = styled.div`
-position: absolute;
-top: 0;
-left: 0;
-width: 100vw;
-height: 100vh;
-background: rgba(0, 0, 0, 0.5);
-display: flex;
-align-items: center;
-justify-content: center;
-`;
-
-export default function Info() {
-  const [open, setOpen] = useState(false);
-
-  var classNameCondition = ""
-  if (open) {
-    classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
-  } else {
-    classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
-  }
-
-  return (
-    <>
-      <button
-        title="Info"
-        className={classNameCondition}
-        onClick={() => setOpen(true)}
-      >
-        <FiInfo />
-      </button>
-
-      <Transition appear show={open} as={Fragment}>
-        <Dialog
-          as="div"
-          className="fixed inset-0 z-20 overflow-y-auto"
-          onClose={() => setOpen(false)}
-        >
-          <div className="min-h-screen px-4 text-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Dialog.Overlay className="fixed inset-0" />
-            </Transition.Child>
-
-            <span
-              className="inline-block h-screen align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <ModalContainer>
-                <div className="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h1"
-                    className="text-3xl font-medium leading-6 text-gray-900 pb-2"
-                  >
-                    Welcome to Riffusion
-                  </Dialog.Title>
-                  <div className="mt-4">
-                    <p className="text-sm text-gray-500">
-                      Riffusion generates endless new jams from any text prompt. Try typing in your favorite artist or genre, and you'll hear the music gradually transform.<br></br>
-                      <br></br>
-                      The diffusion model first creates images from your prompt, and then converts them into music. Learn more about surfing the latent space of sound below.<br></br>
-                    </p>
-                  </div>
-
-                  <div className="mt-6">
-
-                    <button
-                      className="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-sky-500 group-hover:from-sky-600 group-hover:to-sky-500 hover:text-white"
-                      onClick={() => {
-                        window.open("/about", "_blank");
-                        setOpen(false);
-                      }}
-                    >
-                      <span className="relative px-5 py-2 transition-all ease-in duration-75 bg-white rounded-md group-hover:bg-opacity-0">
-                        Surfing the what?
-                      </span>
-                    </button>
-
-                    <button
-                      type="button"
-                      className="text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
-                      onClick={() => setOpen(false)}
-                    >
-                      Let&apos;s Riff 🎸
-                    </button>
-                    
-                  </div>
-                </div>
-              </ModalContainer>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition>
-    </>
-  );
-};

components/ModelInference.tsx

@@ -1,214 +0,0 @@
-import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
-
-import {
-  AppState,
-  InferenceInput,
-  InferenceResult,
-  PromptInput,
-} from "../types";
-
-interface ModelInferenceProps {
-  alpha: number;
-  alphaRollover: boolean;
-  seed: number;
-  appState: AppState;
-  promptInputs: PromptInput[];
-  nowPlayingResult: InferenceResult;
-  newResultCallback: (input: InferenceInput, result: InferenceResult) => void;
-  useBaseten: boolean;
-  denoising: number;
-  seedImageId: string;
-}
-
-/**
- * Calls the server to run model inference.
- *
- *
- */
-export default function ModelInference({
-  alpha,
-  alphaRollover,
-  seed,
-  appState,
-  promptInputs,
-  nowPlayingResult,
-  newResultCallback,
-  useBaseten,
-  denoising,
-  seedImageId,
-}: ModelInferenceProps) {
-  // Create parameters for the inference request
-  const [guidance, setGuidance] = useState(7.0);
-  const [numInferenceSteps, setNumInferenceSteps] = useState(50);
-  const [maskImageId, setMaskImageId] = useState(null);
-
-  const [initializedUrlParams, setInitializedUrlParams] = useState(false);
-  const [numRequestsMade, setNumRequestsMade] = useState(0);
-  const [numResponsesReceived, setNumResponsesReceived] = useState(0);
-
-  useEffect(() => {
-    console.log("Using baseten: ", useBaseten);
-  }, [useBaseten]);
-
-  // Set initial params from URL query strings
-  const router = useRouter();
-  useEffect(() => {
-    if (router.query.guidance) {
-      setGuidance(parseFloat(router.query.guidance as string));
-    }
-
-    if (router.query.numInferenceSteps) {
-      setNumInferenceSteps(parseInt(router.query.numInferenceSteps as string));
-    }
-
-    if (router.query.maskImageId) {
-      if (router.query.maskImageId === "none") {
-        setMaskImageId("");
-      } else {
-        setMaskImageId(router.query.maskImageId as string);
-      }
-    }
-
-    setInitializedUrlParams(true);
-  }, [router.query]);
-
-  // Memoized function to kick off an inference request
-  const runInference = useCallback(
-    async (
-      alpha: number,
-      seed: number,
-      appState: AppState,
-      promptInputs: PromptInput[]
-    ) => {
-      const startPrompt = promptInputs[promptInputs.length - 3].prompt;
-      const endPrompt = promptInputs[promptInputs.length - 2].prompt;
-
-      const transitioning = appState == AppState.TRANSITION;
-
-      const inferenceInput = {
-        alpha: alpha,
-        num_inference_steps: numInferenceSteps,
-        seed_image_id: seedImageId,
-        mask_image_id: maskImageId,
-        start: {
-          prompt: startPrompt,
-          seed: seed,
-          denoising: denoising,
-          guidance: guidance,
-        },
-        end: {
-          prompt: transitioning ? endPrompt : startPrompt,
-          seed: transitioning ? seed : seed + 1,
-          denoising: denoising,
-          guidance: guidance,
-        },
-      };
-
-      console.log(`Inference #${numRequestsMade}: `, {
-        alpha: alpha,
-        prompt_a: inferenceInput.start.prompt,
-        seed_a: inferenceInput.start.seed,
-        prompt_b: inferenceInput.end.prompt,
-        seed_b: inferenceInput.end.seed,
-        appState: appState,
-      });
-
-      setNumRequestsMade((n) => n + 1);
-
-      // Customize for baseten
-      const apiHandler = useBaseten ? "/api/baseten" : "/api/server";
-      const payload = useBaseten
-        ? { worklet_input: inferenceInput }
-        : inferenceInput;
-
-      const response = await fetch(apiHandler, {
-        method: "POST",
-        body: JSON.stringify(payload),
-      });
-
-      const data = await response.json();
-
-      console.log(`Got result #${numResponsesReceived}`);
-
-      if (useBaseten) {
-        if (data?.worklet_output?.model_output) {
-          newResultCallback(
-            inferenceInput,
-            JSON.parse(data.worklet_output.model_output)
-          );
-        }
-        // Note, data is currently wrapped in a data field
-        else if (data?.data?.worklet_output?.model_output) {
-          newResultCallback(
-            inferenceInput,
-            JSON.parse(data.data.worklet_output.model_output)
-          );
-        } else {
-          console.error("Baseten call failed: ", data);
-        }
-      } else {
-        // Note, data is currently wrapped in a data field
-        newResultCallback(inferenceInput, data.data);
-      }
-
-      setNumResponsesReceived((n) => n + 1);
-    },
-    [
-      denoising,
-      guidance,
-      maskImageId,
-      numInferenceSteps,
-      seedImageId,
-      newResultCallback,
-      numRequestsMade,
-      numResponsesReceived,
-      useBaseten,
-    ]
-  );
-
-  // Kick off inference requests
-  useEffect(() => {
-    // Make sure things are initialized properly
-    if (
-      !initializedUrlParams ||
-      appState == AppState.UNINITIALIZED ||
-      promptInputs.length == 0
-    ) {
-      return;
-    }
-
-    // Wait for alpha rollover to resolve.
-    if (alphaRollover) {
-      return;
-    }
-
-    if (numRequestsMade == 0) {
-      // Kick off the first request
-      runInference(alpha, seed, appState, promptInputs);
-    } else if (numRequestsMade == numResponsesReceived) {
-      // Otherwise buffer ahead a few from where the audio player currently is
-      // TODO(hayk): Replace this with better buffer management
-
-      const nowPlayingCounter = nowPlayingResult ? nowPlayingResult.counter : 0;
-      const numAhead = numRequestsMade - nowPlayingCounter;
-
-      if (numAhead < 3) {
-        runInference(alpha, seed, appState, promptInputs);
-      }
-    }
-  }, [
-    initializedUrlParams,
-    alpha,
-    alphaRollover,
-    seed,
-    appState,
-    promptInputs,
-    nowPlayingResult,
-    numRequestsMade,
-    numResponsesReceived,
-    runInference,
-  ]);
-
-  return null;
-}

components/PageHead.tsx

@@ -1,49 +0,0 @@
-import Head from "next/head";
-
-export default function PageHead() {
-  return (
-    <Head>
-      <title>Riffusion</title>
-      <meta property="og:site_name" content="Riffusion" />
-
-      <meta
-        property="article:author"
-        content="Seth Forsgren and Hayk Martiros"
-      />
-
-      <meta property="article:tag" content="music" />
-      <meta property="article:tag" content="machine learning" />
-      <meta property="article:tag" content="artificial intelligence" />
-      <meta property="article:tag" content="generative music" />
-
-      <meta property="og:title" content="Riffusion" />
-      <meta name="twitter:title" content="Riffusion" />
-
-      <meta
-        name="description"
-        content="Stable diffusion for real-time music generation"
-      />
-      <meta
-        name="og:description"
-        content="Stable diffusion for real-time music generation"
-      />
-      <meta
-        name="twitter:description"
-        content="Stable diffusion for real-time music generation"
-      />
-
-      <meta name="twitter:card" content="summary" />
-
-      <meta property="og:image" content="https://i.imgur.com/fywZpQ7.jpeg" />
-      <meta name="twitter:image" content="https://i.imgur.com/fywZpQ7.jpeg" />
-
-      <meta property="og:type" content="website" />
-
-      <meta property="og:url" content="http://www.riffusion." />
-      <meta property="og:locale" content="en_US" />
-      <meta property="og:website" content="http://wwww.riffusion" />
-
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-  );
-}

components/Pause.tsx

@@ -1,41 +0,0 @@
-import { useEffect } from "react";
-import { FiPause, FiPlay } from "react-icons/fi";
-
-interface PauseProps {
-  paused: boolean;
-  setPaused: (value: boolean) => void;
-}
-
-export default function Pause({
-  paused,
-  setPaused,
-}: PauseProps) {
-
-  // Print the state into the console
-  useEffect(() => {
-    if (paused) {
-      console.log("Pause");
-    } else {
-      console.log("Play");
-    }
-  }, [paused]);
-
-  var classNameCondition = ""
-  if (paused) {
-    classNameCondition="animate-pulse fixed z-20 top-4 right-4 md:top-8 md:right-8 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl bg-red-500 hover:bg-red-600 ring-4 ring-red-700 focus:outline-none hover:drop-shadow-2xl"
-  } else {
-    classNameCondition="fixed z-20 top-4 right-4 md:top-8 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
-  }
-
-  return (
-    <>
-      <button
-        title="Pause"
-        className= {classNameCondition}
-        onClick={() => setPaused(!paused)}
-      >
-        {paused ? <FiPlay /> : <FiPause />}
-      </button>
-    </>
-  );
-};

components/PromptEntry.tsx

@@ -1,271 +0,0 @@
-import { InferenceInput, InferenceResult, PlayingState } from "../types";
-import { IoMdClose } from "react-icons/io";
-import Pause from "./Pause";
-
-interface PromptEntryProps {
-  prompt: string;
-  index: number;
-  className: string;
-  playingState: PlayingState;
-  resetCallback: () => void;
-  inferenceResults: InferenceResult[];
-  nowPlayingResult: InferenceResult;
-  setPaused: (value: boolean) => void;
-}
-
-export default function PromptEntry({
-  prompt,
-  index,
-  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 (
-              <div className="tooltip text-left" data-tip="⏪ Jump to previous prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                <p className={className}>{prompt}</p>
-              </div>
-            );
-          case 1:
-            return (
-              <div className="tooltip text-left" data-tip="⏪ Jump to previous prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                <p className={className}>{prompt}</p>
-              </div>
-            );
-          case 2:
-            // active prompt
-            if (prompt == " " || prompt == "") {
-              return <span className="text-slate-600">{"<enter prompt>"}</span>;
-            } else {
-              return (
-                <div className="tooltip text-left" data-tip="🔁 Restart current prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                  <p className={className}>{prompt}</p>
-                </div>
-              )
-            }
-          case 3:
-            if (prompt == " " || prompt == "") {
-              return <p className={className}>...</p>
-            } else {
-              return (
-                <div className="tooltip text-left" data-tip="🚀 Jump to upcoming prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                  <p className={className}>{prompt}</p>
-                </div>
-              )
-            }
-          case 4:
-            if (prompt == " " || prompt == "") {
-              return <p className={className}>UP NEXT: Anything you want</p>;
-            } else {
-              return (
-                <div className="tooltip text-left" data-tip="🚀 Jump to upcoming prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                  <p className={className}>UP NEXT: {prompt}</p>
-                </div>
-              )
-            }
-          default: {
-            console.log("UNHANDLED default");
-            return <p className={className}>{prompt}</p>;
-          }
-        }
-      case PlayingState.TRANSITION:
-        switch (index) {
-          case 0:
-            return (
-              <div className="tooltip text-left" data-tip="⏪ Jump to previous prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                <p className={className}>{prompt}</p>
-              </div>
-            );
-          case 1:
-            return (
-              <div className="tooltip text-left" data-tip="⏪ Jump to previous prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                <p className={className}>{prompt}</p>
-              </div>
-            );
-          case 2:
-            return (
-              <div className="tooltip text-left" data-tip="🔁 Restart outgoing prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                <p className={className}>{prompt}</p>
-              </div>
-            )
-          case 3:
-            if (prompt == " " || prompt == "") {
-              return <p className={className}> -enter prompt- </p>;
-            } else {
-              return (
-                <div className="tooltip text-left" data-tip="🚀 Jump to incoming prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                  <p className={className}>{prompt}</p>
-                </div>
-              )
-            }
-          case 4:
-            if (prompt == " " || prompt == "") {
-              return <p className={className}>...</p>;
-            } else {
-              return (
-                <div className="tooltip text-left" data-tip="🚀 Jump to upcoming prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                  <p className={className}>{prompt}</p>
-                </div>
-              )
-            }
-          case 5:
-            if (prompt == " " || prompt == "") {
-              return <p className={className}>UP NEXT: Anything you want</p>;
-            } else {
-              return (
-                <div className="tooltip text-left" data-tip="🚀 Jump to upcoming prompt?" onClick={() => { jumpToPrompt(prompt, inferenceResults, setPaused, nowPlayingResult) }} >
-                  <p className={className}>UP NEXT: {prompt}</p>
-                </div>
-              )
-            }
-          default: {
-            console.log("UNHANDLED default");
-            return <p className={className}>{prompt}</p>;
-          }
-        }
-    }
-  };
-
-  return (
-    <div className="flex cursor-pointer">
-      {getPromptCopy(prompt)}
-
-      {/* TODO(hayk): Re-enable this when it's working. */}
-      {/* {index == 2 ? (
-        <IoMdClose
-          className="w-6 h-6 ml-2 text-gray-400"
-          onClick={() => {
-            resetCallback();
-          }}
-        />
-      ) : null} */}
-    </div >
-  );
-}
-
-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.location.href = url;
-  }
-  else {
-    let url = generateLinkToPreviousInput(inferenceResults[firstTimePromptAppears].input)
-    window.location.href = url;
-  }
-}
-
-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;
-}

components/PromptPanel.tsx

@@ -1,360 +0,0 @@
-import PromptEntry from "./PromptEntry";
-
-import { AppState, PlayingState, InferenceResult, PromptInput } from "../types";
-import { useRef } from "react";
-import { samplePrompts, rollTheDicePrompts } from "../samplePrompts";
-
-interface PromptPanelProps {
-  prompts: PromptInput[];
-  inferenceResults: InferenceResult[];
-  nowPlayingResult: InferenceResult;
-  appState: AppState;
-  changePrompt: (prompt: string, index: number) => void;
-  resetCallback: () => void;
-  setPaused: (paused: boolean) => void;
-}
-
-export default function PromptPanel({
-  prompts,
-  inferenceResults,
-  nowPlayingResult,
-  appState,
-  changePrompt,
-  resetCallback,
-  setPaused,
-}: PromptPanelProps) {
-  const inputPrompt = useRef(null);
-
-  var playingState: PlayingState;
-
-  const getDisplayPrompts = () => {
-    var displayPrompts = [];
-
-    if (nowPlayingResult == null) {
-      playingState = PlayingState.UNINITIALIZED;
-    } else if (
-      nowPlayingResult.input.start.prompt == nowPlayingResult.input.end.prompt
-    ) {
-      playingState = PlayingState.SAME_PROMPT;
-    } else {
-      playingState = PlayingState.TRANSITION;
-    }
-
-    // Add the last 4 prompts from playedResults
-    // filter inferenceResults to only include results that have been played
-    const playedResults = inferenceResults.filter((r) => r.played);
-
-    // filter playedResults to include only results where alpha is 0.25 (the first alpha of a new transition)
-    const playedResultsAlpha = playedResults.filter(
-      (r) => r.input.alpha == 0.25
-    );
-
-    // filter playedResultsAlpha to include only results where playedResultsAlpha.input.start.prompt is not the same as playedResultsAlpha.input.end.prompt
-    const playedResultsAlphaTransition = playedResultsAlpha.filter(
-      (r) => r.input.start.prompt != r.input.end.prompt
-    );
-
-    // select the last 4 results
-    const lastPlayedResultsAlphaTransition =
-      playedResultsAlphaTransition.slice(-4);
-
-    // add the most recent end prompts to the displayPrompts
-    lastPlayedResultsAlphaTransition.forEach((result) => {
-      displayPrompts.push({ prompt: result.input.end.prompt });
-    });
-
-    // Handle the case where there are less than 4 played results (i.e. the initial state)
-    if (displayPrompts.length < 4) {
-      const promptsToAdd = prompts.slice(displayPrompts.length, 4);
-      displayPrompts = [...promptsToAdd, ...displayPrompts];
-    }
-
-    // Add in the upNext and staged prompts
-    // select the last 2 prompts from prompts
-    const lastPrompts = prompts.slice(-2);
-
-    // make a copy of the lastPrompts with new pointers
-    const lastPromptsCopy = lastPrompts.map((p) => ({ ...p }));
-
-    // if any of the lastPrompts have a transitionCounter, replace them with "" because they are already represented in the displayPrompts
-    lastPromptsCopy.forEach((prompt, index) => {
-      if (prompt.transitionCounter != null) {
-        lastPromptsCopy[index].prompt = "";
-        lastPromptsCopy[index].transitionCounter = null;
-      }
-    });
-
-    // add the prompts to the displayPrompts
-    lastPromptsCopy.forEach((p) => {
-      displayPrompts.push(p);
-    });
-
-    // if playingState == PlayingState.SAME_PROMPT or playingState == PlayingState.UNINITIALIZED, remove the first prompt from displayPrompts
-    if (
-      playingState == PlayingState.SAME_PROMPT ||
-      playingState == PlayingState.UNINITIALIZED
-    ) {
-      displayPrompts.shift();
-    }
-
-    return displayPrompts;
-  };
-
-  const getPromptEntryClassName = (index: number) => {
-    switch (playingState) {
-      case PlayingState.UNINITIALIZED:
-        return promptEntryClassNames_5_0[index];
-      case PlayingState.SAME_PROMPT:
-        if (appState != AppState.TRANSITION) {
-          return promptEntryClassNames_5_0[index];
-        } else {
-          switch (nowPlayingResult.input.alpha) {
-            case 0:
-              return promptEntryClassNames_5_0[index];
-            case 0.25:
-              return promptEntryClassNames_5_25[index];
-            case 0.5:
-              return promptEntryClassNames_5_50[index];
-            case 0.75:
-              return promptEntryClassNames_5_75[index];
-            case 1:
-              return promptEntryClassNames_5_1[index];
-          }
-        }
-      case PlayingState.TRANSITION:
-        switch (nowPlayingResult.input.alpha) {
-          case 0:
-            return promptEntryClassNames_6_0[index];
-          case 0.25:
-            return promptEntryClassNames_6_25[index];
-          case 0.5:
-            return promptEntryClassNames_6_50[index];
-          case 0.75:
-            return promptEntryClassNames_6_75[index];
-          case 1:
-            return promptEntryClassNames_6_1[index];
-        }
-      default:
-        // These states are reached if alpha is greater than 1 but the new inference is not ready
-        if (appState != AppState.TRANSITION) {
-          return promptEntryClassNames_5_0[index];
-        } else if (playingState == PlayingState.SAME_PROMPT) {
-          return promptEntryClassNames_5_1[index];