init

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_APIURL=https://huggingface.co

.gitattributes

@@ -0,0 +1,35 @@
+*.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
+*.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

.gitignore

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

Dockerfile

@@ -0,0 +1,25 @@
+# Dockerfile
+
+# Use an official Node.js runtime as the base image
+FROM node:18
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the container
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application files to the container
+COPY . .
+
+# Build the Next.js application for production
+RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

README 2.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

README.md

@@ -0,0 +1,11 @@
+---
+title: Hugging Face Client REST API
+emoji: ⚡
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: true
+license: mit
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Fira_Code, Inter } from "next/font/google";
+import "@/assets/globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-inter",
+});
+
+const fira_code = Fira_Code({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-fira-code",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={`${inter.variable} ${fira_code.variable}`}>
+      <body>
+        <div id="background__noisy" />
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,10 @@
+import { Editor } from "@/components/editor";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <section className="h-full">
+      <Editor />
+    </section>
+  );
+}

assets/globals.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body {
+  @apply bg-gray-200 min-h-screen relative tracking-wide overflow-x-hidden;
+  z-index: 1;
+}
+
+#background__noisy {
+  @apply bg-blend-normal pointer-events-none opacity-80;
+  background-size: 25ww auto;
+  background-image: url('/background_noisy.webp');
+  z-index: -1;
+  @apply fixed w-screen h-screen top-0 left-0;
+}

components/editor/header.tsx

@@ -0,0 +1,18 @@
+import HFLogo from "assets/hf-logo.svg";
+import Image from "next/image";
+
+export const EditorHeader = () => {
+  return (
+    <header className="px-6 py-2.5 border border-slate-950 bg-slate-950 flex justify-between items-center">
+      <Image src={HFLogo} alt="Hugging Face Logo" width={34} height={34} />
+      <p className="text-gray-300 font-code text-sm font-semibold">
+        Hugging Face API
+      </p>
+      <div className="flex items-center justify-end gap-3">
+        <div className="bg-teal-600 w-3 h-3 rounded-full" />
+        <div className="bg-indigo-600 w-3 h-3 rounded-full" />
+        <div className="bg-purple-500 w-3 h-3 rounded-full" />
+      </div>
+    </header>
+  );
+};

components/editor/index.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { useState } from "react";
+
+import { EditorHeader } from "./header";
+import { EditorSidebar } from "./sidebar";
+import { EditorMain } from "./main";
+import { ApiRoute } from "@/utils/type";
+import { API_COLLECTIONS } from "@/utils/datas/api_collections";
+
+export const Editor = () => {
+  const [collections, setCollections] = useState<string[]>(["search"]);
+  const [endpoint, setEndpoint] = useState<ApiRoute | null>(
+    API_COLLECTIONS[0].endpoints[0]
+  );
+
+  return (
+    <div className="bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
+      <EditorHeader />
+      <main className="flex h-full">
+        <EditorSidebar
+          collections={collections}
+          endpoint={endpoint}
+          onCollections={setCollections}
+          onEndpoint={setEndpoint}
+        />
+        {endpoint && (
+          <EditorMain
+            collections={collections}
+            endpoint={endpoint}
+            onCollections={setCollections}
+            onEndpoint={setEndpoint}
+          />
+        )}
+      </main>
+    </div>
+  );
+};

components/editor/main/endpoint.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import classNames from "classnames";
+
+import { Method } from "@/components/method";
+import { splitStringBracket } from "@/utils";
+import { ApiRoute } from "@/utils/type";
+
+export const Endpoint = ({
+  endpoint,
+  children,
+}: {
+  endpoint: ApiRoute;
+  children: React.ReactElement;
+}) => {
+  const path_formatted = useMemo(
+    () => splitStringBracket(endpoint.path),
+    [endpoint.path]
+  );
+
+  return (
+    <div className="bg-slate-900 w-full">
+      <div className="bg-slate-950/50 p-3 rounded-lg flex items-center justify-between">
+        <div className="text-white text-sm flex items-center justify-start gap-2 w-full">
+          <Method method={endpoint.method} />
+          <div className="flex items-center justify-start gap-1">
+            {path_formatted.map((p, i) => {
+              const isCustomizable = p.includes("{") && p.includes("}");
+              return (
+                <p
+                  key={i}
+                  className={classNames("", {
+                    "bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80":
+                      isCustomizable,
+                    "text-slate-300": !isCustomizable,
+                  })}
+                  contentEditable={isCustomizable}
+                >
+                  {p}
+                </p>
+              );
+            })}
+          </div>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

components/editor/main/index.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+
+import { ApiRoute } from "@/utils/type";
+import axios from "@/utils/axios";
+
+import { Endpoint } from "./endpoint";
+import { Request } from "./request";
+import { Response } from "./response";
+
+export const EditorMain = ({
+  collections,
+  endpoint,
+  onCollections,
+  onEndpoint,
+}: {
+  collections: string[];
+  endpoint: ApiRoute;
+  onCollections: (collections: string[]) => void;
+  onEndpoint: (endpoint: ApiRoute) => void;
+}) => {
+  const [formattedEndpoint, setFormattedEndpoint] = useState<string | null>(
+    null
+  );
+
+  const [response, setResponse] = useState<any | null>(null);
+
+  const handleRequest = async () => {
+    const url = new URL(endpoint.path, process.env.NEXT_PUBLIC_APP_APIURL);
+    if (endpoint?.parameters) {
+      const parameters = Object.entries(endpoint.parameters).filter(
+        ([key, value]) => value !== "" && value !== null
+      );
+      parameters.forEach(([key, value]) => {
+        url.searchParams.append(key, value as string);
+      });
+    }
+    console.log("url ", url);
+
+    axios
+      .get(url.pathname, {
+        params: url.searchParams,
+      })
+      .then((res: any) => {
+        console.log("res ", res);
+        if (res.ok) {
+          setResponse(res.data);
+        }
+      });
+  };
+
+  return (
+    <div className="flex-1 bg-slate-900/50 h-[calc(100%-56px)]">
+      <div className="h-full grid grid-cols-2">
+        <Request endpoint={endpoint}>
+          <Endpoint endpoint={endpoint}>
+            <button
+              className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
+              onClick={handleRequest}
+            >
+              Send
+            </button>
+          </Endpoint>
+        </Request>
+        <Response res={response} />
+      </div>
+    </div>
+  );
+};

components/editor/main/request.tsx

@@ -0,0 +1,37 @@
+import { ApiRoute } from "@/utils/type";
+
+export const Request = ({
+  endpoint,
+  children,
+}: {
+  endpoint: ApiRoute;
+  children: React.ReactElement;
+}) => {
+  return (
+    <div className="h-full bg-slate-900 p-4">
+      {children}
+      {endpoint?.parameters && (
+        <div className="mt-6 grid grid-cols-1 gap-4">
+          <p className="text-slate-400 uppercase text-xs font-semibold">
+            Optional parameters
+          </p>
+          {endpoint?.parameters &&
+            Object.entries(endpoint.parameters).map(([key, value]) => (
+              <div
+                key={key}
+                className="flex items-center justify-between gap-2"
+              >
+                <p className="text-slate-300 text-sm">{key}</p>
+                <input
+                  value={value as string}
+                  type="text"
+                  className="bg-slate-950/50 w-full rounded-md px-2 py-1 text-slate-100 outline-none placeholder:text-slate-600"
+                  placeholder="value"
+                />
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};

components/editor/main/response.tsx

@@ -0,0 +1,11 @@
+import Highlight from "react-highlight";
+import "node_modules/highlight.js/styles/atom-one-dark.css";
+export const Response = ({ res }: { res: any }) => {
+  return (
+    <div className="overflow-auto h-full">
+      <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3">
+        {JSON.stringify(res ?? {}, null, 2)}
+      </Highlight>
+    </div>
+  );
+};

components/editor/sidebar.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { TbChevronDown } from "react-icons/tb";
+import classNames from "classnames";
+
+import { API_COLLECTIONS } from "@/utils/datas/api_collections";
+import { Method } from "@/components/method";
+import { ApiRoute } from "@/utils/type";
+
+export const EditorSidebar = ({
+  collections,
+  endpoint,
+  onCollections,
+  onEndpoint,
+}: {
+  collections: string[];
+  endpoint: ApiRoute | null;
+  onCollections: (collections: string[]) => void;
+  onEndpoint: (endpoint: ApiRoute) => void;
+}) => {
+  const handleSetActiveCollection = (key: string) => {
+    if (collections.includes(key)) {
+      onCollections(collections.filter((col) => col !== key));
+    } else {
+      onCollections([...collections, key]);
+    }
+  };
+
+  // useUpdateEffect(() => {
+  //   if (collections) {
+  //     const first_endpoint = API_COLLECTIONS.find(
+  //       (col) => col.key === collections
+  //     )?.endpoints[0];
+  //     if (first_endpoint) onEndpoint(first_endpoint);
+  //   }
+  // }, [collections]);
+
+  return (
+    <ul className="min-w-[300px] max-w-sm w-full bg-slate-900 border-r border-slate-700/40 h-full overflow-auto">
+      {API_COLLECTIONS.map((collection, c) => (
+        <li key={collection.key} className="block w-full">
+          <div
+            className={classNames(
+              "p-4 border-b border-slate-700/70 text-slate-400 cursor-pointer hover:bg-slate-700/30 flex items-center justify-between transition-all duration-200 select-none active:bg-indigo-600 active:text-slate-100",
+              {
+                "bg-indigo-600 !text-slate-100 hover:!bg-indigo-600 !border-indigo-500":
+                  collections.includes(collection.key),
+              }
+            )}
+            onClick={() => handleSetActiveCollection(collection.key)}
+          >
+            <p className="font-semibold uppercase text-xs flex items-center justify-between">
+              {collection.key} API
+            </p>
+            <TbChevronDown
+              className={classNames(
+                "text-slate-400 transition-all duration-200",
+                {
+                  "transform rotate-180 !text-slate-100": collections.includes(
+                    collection.key
+                  ),
+                }
+              )}
+            />
+          </div>
+          {collections.includes(collection.key) && (
+            <div className="bg-slate-700/20 w-full p-3 border-b border-slate-700/70">
+              <ul className="w-full">
+                {collection.endpoints.map((end, e) => (
+                  <li
+                    key={e}
+                    className={classNames(
+                      "text-slate-400 font-semibold text-xs flex items-center justify-start gap-2 rounded-md p-2.5 hover:bg-slate-600 hover:bg-opacity-10 cursor-pointer border-t border-b border-transparent select-none",
+                      {
+                        "bg-slate-600 bg-opacity-20 hover:!bg-opacity-20 !text-slate-200 border-b !border-b-slate-700/70 border-t !border-t-slate-800":
+                          endpoint?.path === end.path &&
+                          endpoint?.method === end.method,
+                      }
+                    )}
+                    onClick={() => onEndpoint(end)}
+                  >
+                    <Method method={end.method} />
+                    <p className="truncate">{end.path}</p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};

components/method/index.tsx

@@ -0,0 +1,23 @@
+import classNames from "classnames";
+
+export const Method = ({
+  method,
+  className,
+}: {
+  method: string;
+  className?: string;
+}) => (
+  <div
+    className={classNames(
+      `px-1 text-[10px] rounded text-slate-100 font-semibold inline-block ${className}`,
+      {
+        "bg-blue-500": method === "GET",
+        "bg-green-600": method === "POST",
+        "bg-yellow-600": method === "PUT" || method === "PATCH",
+        "bg-red-600": method === "DELETE",
+      }
+    )}
+  >
+    {method}
+  </div>
+);

next.config.js

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

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "client-api",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "next": "13.5.6",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-highlight": "^0.15.0",
+    "react-icons": "^4.11.0",
+    "react-use": "^17.4.0",
+    "redaxios": "^0.5.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-highlight": "^0.12.7",
+    "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.6",
+    "postcss": "^8",
+    "tailwindcss": "^3",
+    "typescript": "^5"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    fontFamily: {
+      sans: ['var(--font-inter)', 'sans-serif'],
+      code: ['var(--font-fira-code)', 'monospace'],
+    }
+  },
+  plugins: [],
+}
+export default config

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

utils/axios.ts

@@ -0,0 +1,7 @@
+import redaxios from 'redaxios';
+
+const axios = redaxios.create({
+  baseURL: process.env.NEXT_PUBLIC_APP_APIURL
+});
+
+export default axios

utils/datas/api_collections.ts

@@ -0,0 +1,76 @@
+import { ApiCollection } from "@/utils/type";
+
+export const API_COLLECTIONS: Array<ApiCollection> = [{
+  key: 'search',
+  endpoints: [{
+    method: 'GET',
+    path: '/api/models',
+    parameters: {
+      search: "",
+      author: "",
+      filter: "",
+      sort: "",
+      direction: "",
+      limit: 10,
+      full: true,
+      config: true
+    }
+  }, {
+    method: 'GET',
+    path: '/api/models/{repo_id}'
+  }, {
+    method: 'GET',
+    path: '/api/models-tags-by-type'
+  }, {
+    method: 'GET',
+    path: '/api/datasets'
+  }, {
+    method: 'GET',
+    path: '/api/datasets/{repo_id}'
+  }],
+}, {
+  key: 'repo',
+  endpoints: [{
+    method: 'POST',
+    path: '/api/repos/create',
+  }, {
+    method: 'DELETE',
+    path: '/api/repos/delete'
+  }, {
+    method: 'PUT',
+    path: '/api/repos/{repo_type}/{repo_id}/settings'
+  }, {
+    method: 'POST',
+    path: '/api/repos/move'
+  }],
+}, {
+  key: 'user',
+  endpoints: [{
+    method: 'GET',
+    path: '/api/whoami-v2',
+  }],
+}, {
+  key: 'collection',
+  endpoints: [{
+    method: 'POST',
+    path: '/api/collections',
+  }, {
+    method: 'GET',
+    path: '/api/collections/{namespace}/{slug}-{id}'
+  }, {
+    method: 'PATCH',
+    path: '/api/collections/{namespace}/{slug}-{id}'
+  }, {
+    method: 'DELETE',
+    path: '/api/collections/{namespace}/{slug}-{id}'
+  }, {
+    method: 'POST',
+    path: '/api/collections/{namespace}/{slug}-{id}/item'
+  }, {
+    method: 'PATCH',
+    path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
+  }, {
+    method: 'DELETE',
+    path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
+  }],
+}]

utils/index.ts

@@ -0,0 +1,5 @@
+export const splitStringBracket = (str: string): string[] => {
+  // Split string by bracket but keep the bracket
+  const result = str.split(/(\{.*?\})/g)
+  return result.filter((item) => item !== '')
+}

utils/type.ts

@@ -0,0 +1,10 @@
+export interface ApiCollection {
+  key: string
+  endpoints: Array<ApiRoute>
+}
+
+export interface ApiRoute {
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  path: string,
+  parameters?: any
+}