pull out proper camera

components/ThreeCanvas.tsx

@@ -2,6 +2,7 @@ import { Canvas } from "@react-three/fiber";
 
 import { InferenceResult } from "../types";
 import SpectrogramViewer from "./SpectrogramViewer";
+import { PerspectiveCamera } from "@react-three/drei";
 
 interface CanvasProps {
   paused: boolean;
@@ -20,9 +21,16 @@ export default function ThreeCanvas({
   audioLength,
 }: CanvasProps) {
   return (
-    <Canvas camera={{ position: [0, 0, 8], rotation: [0.4, 0, 0] }}>
+    <Canvas>
       <ambientLight intensity={2} />
       <pointLight position={[40, 40, 40]} />
+      <PerspectiveCamera
+        makeDefault
+        position={[0, 0, 8]}
+        rotation={[0.4, 0, 0]}
+        fov={70}
+      />
+
       <SpectrogramViewer
         paused={paused}
         inferenceResults={inferenceResults}

pages/index.tsx

@@ -12,6 +12,7 @@ import { InferenceResult, PromptInput } from "../types";
 
 import * as Tone from "tone";
 
+// TODO(hayk): Get this into a configuration.
 const SERVER_URL = "http://129.146.52.68:3013/run_inference/";
 
 const defaultPromptInputs = [