feat: dark deco

darkdeco/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

darkdeco/.gitignore

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

darkdeco/README.md

@@ -0,0 +1,60 @@
+# DarkDeco
+
+[Try out](https://darkdeco.octo.ai/) DarkDeco for yourself!
+
+DarkDeco demo in Next.js + TypeScript.
+
+Demos utilize our [demo design system](https://github.com/octoml/demo-design-system) that is easy to swap out for your own styling.
+
+## Tech stack
+
+Our demo tech stack includes
+
+- [Next.js](https://nextjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [OctoAI Typescript SDK](https://www.npmjs.com/package/@octoai/client)
+
+## Getting Started
+
+Clone the repo
+
+```bash
+git clone https://github.com/octoml/octoai-apps.git
+
+```
+
+Navigate to the demo you want to use
+
+```bash
+cd octoai-apps/darkdeco
+```
+
+## Add OctoAI token to `.env`
+
+Create an [OctoAI token](https://octo.ai/docs/getting-started/how-to-create-an-octoai-access-token) if you don't already have one.
+
+Create a `.env` file in the folder you are working in (`octoai-apps/darkdeco`) and add your token:
+
+```bash
+OCTOAI_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+```
+
+## Developing
+
+Install dependencies
+
+```bash
+yarn
+```
+
+Start the dev server
+
+```bash
+yarn dev
+```
+
+## Deploying
+
+[Deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Foctoml%2Foctoai-apps%2Ftree%2Fmain%2Fsmartflakes&env=OCTOAI_TOKEN&envDescription=Create%20an%20OctoAI%20token%20if%20you%20don't%20already%20have%20one.&envLink=https%3A%2F%2Focto.ai%2Fdocs%2Fgetting-started%2Fhow-to-create-an-octoai-access-token&project-name=my-darkdeco-app&repository-name=my-darkdeco-app)
+
+The easiest way to deploy is by using [Vercel](https://vercel.com/docs/frameworks/nextjs), but you can use [any host](https://nextjs.org/docs/app/building-your-application/deploying#self-hosting) that supports Node.js.

darkdeco/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

darkdeco/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@octoai-apps/darkdeco",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@octoai/demo-design-system": "*",
+    "@octoai/client": "^0.4.1",
+    "next": "14.0.4",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
+    "typescript": "^5"
+  },
+  "license": "MIT"
+}

darkdeco/src/app/api/generate/route.ts

@@ -0,0 +1,46 @@
+import { Client } from "@octoai/client";
+import { NextRequest } from "next/server";
+
+// Pass OctoAI Token into the client for authorization
+const client = new Client(process.env.OCTOAI_TOKEN);
+
+export async function POST(request: NextRequest) {
+  try {
+    const data = await request.json();
+
+    const inferenceData = await client.inferAsync(
+      "https://image.octoai.run/generate/sdxl",
+      {
+        // I misspelled 'stippling' as 'stipping' but it works better
+        prompt: `${data.prompt} dimensional, with light stipping at night, in dark deco style`,
+        negative_prompt:
+          "Blurry, distortion, low-res, poor quality, day, sunlight",
+        style_preset: "base",
+        checkpoint: "octoai:lcm_sdxl",
+        sampler: "LCM",
+        loras: { asset_01hq3vjh1pffjtqhwzqwzzr44a: 1 },
+        steps: 30,
+        cfg_scale: 2,
+        width: 1024,
+        height: 1024,
+      }
+    );
+
+    // Check if `inferenceData` is ready
+    let ready = await client.isFutureReady(inferenceData);
+
+    // If `inferenceData` is not ready, keep trying endpoint until it is
+    while (!ready) {
+      ready = await client.isFutureReady(inferenceData);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+
+    // Once `inferenceData` is resolved, send back to client
+    const inferenceOutput = await client.getFutureResult(inferenceData);
+
+    return Response.json({ ...inferenceOutput });
+  } catch (error) {
+    console.error(`Error generating image: ${error}`);
+    return Response.error();
+  }
+}

darkdeco/src/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import "@octoai/demo-design-system/dist/styles.css";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const siteTitle = "DarkDeco | Powered by OctoAI";
+const siteDescription = "Create your own dark deco image";
+const socialShare = "/images/social-share.png";
+
+export const metadata: Metadata = {
+  title: siteTitle,
+  openGraph: {
+    title: siteTitle,
+    description: siteDescription,
+    images: [{ url: socialShare }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: siteTitle,
+    description: siteDescription,
+    images: [socialShare],
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Header />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}

darkdeco/src/app/page.tsx

@@ -0,0 +1,14 @@
+import GeneratedImage from "@/components/GeneratedImage";
+
+export default function Home() {
+  return (
+    <main className="container">
+      <div className="hero">
+        <h1>
+          Create your own <span>dark deco image</span>
+        </h1>
+      </div>
+      <GeneratedImage />
+    </main>
+  );
+}

darkdeco/src/components/ErrorBanner.tsx

@@ -0,0 +1,21 @@
+const ErrorBanner = ({ bannerText }: { bannerText: string }) => {
+    return (
+        <div role="alert" id="error-banner">
+            <div className="content">
+                <p>{bannerText}</p>
+                <button className="absolute top-0 bottom-0 right-0 px-4 py-3 bg-none hover:bg-none shadow-transparent">
+                    <svg
+                        className="fill-current h-6 w-6"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20">
+                        <title>Close</title>
+                        <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+    )
+};
+
+export default ErrorBanner;

darkdeco/src/components/Footer.tsx

@@ -0,0 +1,67 @@
+import Image from "next/image";
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="container">
+        <nav>
+          <ul>
+            <li className="with-icon">
+              <a
+                href="https://github.com/octoml/octoai-apps/tree/main/darkdeco"
+                target="_blank"
+              >
+                <Image
+                  src="/icons/github.svg"
+                  alt="Github Icon"
+                  width="18"
+                  height="18"
+                />
+                View on Github
+              </a>
+            </li>
+            <li className="with-icon">
+              <a
+                href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Foctoml%2Foctoai-apps%2Ftree%2Fmain%2Fdarkdeco&env=OCTOAI_TOKEN&envDescription=Create%20an%20OctoAI%20token%20if%20you%20don't%20already%20have%20one.&envLink=https%3A%2F%2Focto.ai%2Fdocs%2Fgetting-started%2Fhow-to-create-an-octoai-access-token&project-name=my-darkdeco-app&repository-name=my-darkdeco-app"
+                target="_blank"
+              >
+                <Image
+                  src="/icons/vercel.svg"
+                  alt="Vercel Icon"
+                  width="18"
+                  height="18"
+                />
+                Deploy to Vercel
+              </a>
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <a href="https://octo.ai/?utm_source=darkdeco" target="_blank">
+                Powered by OctoAI
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://octo.ai/legals/privacy-policy/?utm_source=darkdeco"
+                target="_blank"
+              >
+                Privacy Policy
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://octo.ai/legals/terms-of-use/?utm_source=darkdeco"
+                target="_blank"
+              >
+                Terms of Use
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;