updated v1.1

package.json

@@ -11,13 +11,15 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.1.0",
     "react-scripts": "5.0.1",
+    "react-snap": "^1.23.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "postbuild": "react-snap"
   },
   "eslintConfig": {
     "extends": [

src/App.js

@@ -2,8 +2,8 @@ import "./App.css";
 import Title from "./components/Title";
 import PubButtonList from "./components/PubButtonList";
 import pub_links from "./data/pub_links";
-import videos from "./data/videos";
-import VideoGrid from "./components/VideoGrid";
+import examples from "./data/examples";
+import ExampleGrid from "./components/ExampleGrid";
 import Footer from "./components/Footer";
 
 function App() {
@@ -28,13 +28,13 @@ function App() {
 
       {/* video sections */}
       <div className="container mx-auto my-8 px-8 md:px-16 md:pt-12 lg:px-36">
-        {videos.map((videoGroup) => (
-          <VideoGrid videoGroup={videoGroup} />
+        {examples.map((exampleGroup) => (
+          <ExampleGrid data={exampleGroup} />
         ))}
       </div>
 
       {/* Footer */}
-      <div>
+      <div className="mt-8">
         <Footer />
       </div>
     </div>

src/components/ExampleGrid.js

@@ -0,0 +1,83 @@
+import { GrAdd, GrLinkNext } from "react-icons/gr";
+import classNames from "classnames";
+
+const VideoItem = ({ video }) => {
+  return (
+    <div className="w-64">
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "0px",
+          "padding-bottom": "100.000%",
+        }}
+      >
+        <iframe
+          title={video.link}
+          allow="fullscreen;autoplay"
+          allowfullscreen
+          height="100%"
+          src={video.link}
+          width="100%"
+          style={{
+            border: "none",
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            left: "0px",
+            top: "0px",
+            overflow: "hidden",
+          }}
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+const renderItem = (item) => {
+  const hasInputs = item.inputs.length > 0;
+
+  return (
+    <div className={classNames(hasInputs ? "col-span-full" : "")}>
+      <div className="flex justify-center items-center space-x-4">
+        {hasInputs &&
+          item.inputs.map((input_, idx) => {
+            if (idx < item.inputs.length - 1) {
+              return (
+                <>
+                  <VideoItem video={input_} />
+                  <GrAdd size={64} />
+                </>
+              );
+            } else {
+              return (
+                <>
+                  <VideoItem video={input_} />
+                  <GrLinkNext size={64} />
+                </>
+              );
+            }
+          })}
+
+        <VideoItem video={item.output} />
+      </div>
+
+      <div className="flex justify-center">
+      <p className="leading-tight text-justify text-sm">{item.prompt}</p>
+      </div>
+    </div>
+  );
+};
+
+const ExampleGrid = ({ data }) => {
+  return (
+    <div className="mb-4">
+      <span className="text-3xl text-semibold">{data.title}</span>
+      <div className="grid mt-4 gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {data.items.map((item) => renderItem(item))}
+      </div>
+    </div>
+  );
+};
+
+export default ExampleGrid;

src/components/Footer.js

@@ -6,7 +6,7 @@ const Footer = () => {
       <div className="text-center">
         <div className="flex justify-center space-x-4">
           <a
-            href="./static/videos/nerfies_paper.pdf"
+            href="https://nerfies.github.io/static/videos/nerfies_paper.pdf"
             target="_blank"
             rel="noopener noreferrer"
           >

src/components/VideoGrid.js

@@ -1,48 +0,0 @@
-const VideoItem = ({ video }) => {
-  return (
-    <div>
-      <div
-        style={{
-          position: "relative",
-          width: "100%",
-          height: "0px",
-          "padding-bottom": "100.000%",
-        }}
-      >
-        <iframe
-          title={video.prompt}
-          allow="fullscreen;autoplay"
-          allowfullscreen
-          height="100%"
-          src={video.link}
-          width="100%"
-          style={{
-            border: "none",
-            width: "100%",
-            height: "100%",
-            position: "absolute",
-            left: "0px",
-            top: "0px",
-            overflow: "hidden",
-          }}
-        ></iframe>
-      </div>
-      <p className="leading-tight text-justify text-sm">{video.prompt}</p>
-    </div>
-  );
-};
-
-const VideoGrid = ({ videoGroup }) => {
-  return (
-    <div>
-      <span className="text-3xl text-semibold">{videoGroup.title}</span>
-      <div className="grid mt-4 gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-        {videoGroup.items.map((video) => (
-          <VideoItem video={video} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default VideoGrid;

src/data/examples.js

@@ -0,0 +1,202 @@
+const examples = [
+  {
+    title: "Text To Video",
+    items: [
+      {
+        prompt:
+          "Drone view of waves crashing against the rugged cliffs along Big Sur\u2019s garay point beach. The crashing blue waters create white-tipped waves, while the golden light of the setting sun illuminates the rocky shore. A small island with a lighthouse sits in the distance, and green shrubbery covers the cliff\u2019s edge. The steep drop from the road down to the beach is a dramatic feat, with the cliff\u2019s edges jutting out over the sea. This is a view that captures the raw beauty of the coast and the rugged landscape of the Pacific Coast Highway.",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/u8kp8p?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "Solitary snowbound half-timbered rustic house decorated for Christmas among snow covered fir tree forest at snowfall winter night.",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/kc6un0?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt: "Time-Lapse Milky Way above the Mountain",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/89dp98?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "Sun comes out from behind a cloud in the early morning above the clouds. Flying above the clouds illuminated by the morning sun. Epic sunrise in the sky",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/pryajz?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "Time Lapse of the rising sun over a tree in an open rural landscape, with clouds in the blue sky beautifully playing with the rays of light",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/oqojou?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt: "Time-Lapse Milky Way above the Mountain",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/alpgxk?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt: "Time-Lapse Milky Way above the Mountain",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/y5drtv?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "Snow falling over multiple houses and trees on winter landscape against night sky. christmas festivity and celebration concept",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/kk6t75?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "Snow falling over multiple houses and trees on winter landscape against night sky. christmas festivity and celebration concept",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/9lp2pu?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "A large orange octopus is seen resting on the bottom of the ocean floor, blending in with the sandy and rocky terrain. Its tentacles are spread out around its body, and its eyes are closed. The octopus is unaware of a king crab that is crawling towards it from behind a rock, its claws raised and ready to attack. The crab is brown and spiny, with long legs and antennae. The scene is captured from a wide angle, showing the vastness and depth of the ocean. The water is clear and blue, with rays of sunlight filtering through. The shot is sharp and crisp, with a high dynamic range. The octopus and the crab are in focus, while the background is slightly blurred, creating a depth of field effect.",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/hk9ks6?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "This close-up shot of a Victoria crowned pigeon showcases its striking blue plumage and red chest. Its crest is made of delicate, lacy feathers, while its eye is a striking red color. The bird\u2019s head is tilted slightly to the side, giving the impression of it looking regal and majestic. The background is blurred, drawing attention to the bird\u2019s striking appearance.",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/15qiq3?quality=highest&autoplay=1",
+        },
+      },
+    ],
+  },
+  {
+    title: "Animating Image",
+    items: [
+      {
+        prompt: "a brown bear in the water with a fish in its mouth",
+        inputs: [
+          {
+            link: "https://streamable.com/e/ijgwvu?quality=highest&autoplay=1",
+          },
+        ],
+        output: {
+          link: "https://streamable.com/e/61sof1?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt: "a bald eagle flying over a tree filled forest",
+        inputs: [
+          {
+            link: "https://streamable.com/e/k7ceph?quality=highest&autoplay=1",
+          },
+        ],
+        output: {
+          link: "https://streamable.com/e/om38hj?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt:
+          "a group of statues on the side of a building, camera pans right",
+        inputs: [
+          {
+            link: "https://streamable.com/e/qlpsoa?quality=highest&autoplay=1",
+          },
+        ],
+        output: {
+          link: "https://streamable.com/e/ufumay?quality=highest&autoplay=1",
+        },
+      },
+    ],
+  },
+  {
+    title: "Text to Image",
+    items: [
+      {
+        prompt:
+          "Bright scene, aerial view,ancient city, fantasy, gorgeous light, mirror reflection, high detail, wide angle lens.",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/634nzw?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt: "A small cactus with a happy face in the Sahara desert.",
+        inputs: [],
+        output: {
+          link: "https://streamable.com/e/an2uv0?quality=highest&autoplay=1",
+        },
+      },
+    ],
+  },
+  {
+    title: "Connecting Images",
+    items: [
+      {
+        prompt: "A sad small cactus with in the Sahara desert becomes happy.",
+        inputs: [
+          {
+            link: "https://streamable.com/e/4egeu9?quality=highest&autoplay=1",
+          },
+          {
+            link: "https://streamable.com/e/a6nvpn?quality=highest&autoplay=1",
+          },
+        ],
+        output: {
+          link: "https://streamable.com/e/ufw6jn?quality=highest&autoplay=1",
+        },
+      },
+      {
+        prompt: "A breathtaking sunrise scene.",
+        inputs: [
+          {
+            link: "https://streamable.com/e/s0ztn6?quality=highest&autoplay=1",
+          },
+          {
+            link: "https://streamable.com/e/azq1tm?quality=highest&autoplay=1",
+          },
+        ],
+        output: {
+          link: "https://streamable.com/e/x87a1y?quality=highest&autoplay=1",
+        },
+      },
+    ],
+  },
+  {
+    title: "Video Editing",
+    items: [
+      {
+        prompt: "a snowy forest",
+        inputs: [
+          {
+            link: "https://streamable.com/e/yl8bvz?quality=highest&autoplay=1",
+          },
+        ],
+        output: {
+          link: "https://streamable.com/e/4mk673?quality=highest&autoplay=1",
+        },
+      },
+    ],
+  },
+];
+
+export default examples;

src/data/videos.js

@@ -1,19 +0,0 @@
-const videos = [
-  // this represents a group of videos under the same title
-  {
-    "title": "v1.1 Results",
-    "items": [
-      {
-        prompt: "A bustling city street at night, filled with the glow of car headlights and the ambient light of streetlights. The scene is a blur of motion, with cars speeding by and pedestrians navigating the crosswalks. The cityscape is a mix of towering buildings and illuminated signs, creating a vibrant and dynamic atmosphere. The perspective of the video is from a high angle, providing a bird's eye view of the street and its surroundings. The overall style of the video is dynamic and energetic, capturing the essence of urban life at night.",
-        link: "https://streamable.com/e/k4a0l1?quality=highest",
-      },
-
-      // add more items here
-    ]
-  }
-  // add more groups here
-]
-
-export default videos;
-
-

src/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import { hydrate, render } from "react-dom";
 
+const rootElement = document.getElementById("root");
+if (rootElement.hasChildNodes()) {
+  hydrate(<App />, rootElement);
+} else {
+  render(<App />, rootElement);
+}
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals