like-history-normalized

Running

App Files Files Community

timqian commited on Nov 22, 2023

Commit

362fadb

1 Parent(s): 76f9987

functional

Browse files

Files changed (6) hide show

asset-manifest.json +3 -3
index.html +1 -1
src/App.js +84 -22
static/js/main.6c20428f.js +0 -0
static/js/main.6c20428f.js.LICENSE.txt +41 -0
static/js/main.6c20428f.js.map +0 -0

asset-manifest.json CHANGED Viewed

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.1e103507.css",
-    "main.js": "/static/js/main.fc5d26c1.js",
     "static/js/787.0bfccc2a.chunk.js": "/static/js/787.0bfccc2a.chunk.js",
     "index.html": "/index.html",
     "main.1e103507.css.map": "/static/css/main.1e103507.css.map",
-    "main.fc5d26c1.js.map": "/static/js/main.fc5d26c1.js.map",
     "787.0bfccc2a.chunk.js.map": "/static/js/787.0bfccc2a.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.1e103507.css",
-    "static/js/main.fc5d26c1.js"
   ]
 }

 {
   "files": {
     "main.css": "/static/css/main.1e103507.css",
+    "main.js": "/static/js/main.6c20428f.js",
     "static/js/787.0bfccc2a.chunk.js": "/static/js/787.0bfccc2a.chunk.js",
     "index.html": "/index.html",
     "main.1e103507.css.map": "/static/css/main.1e103507.css.map",
+    "main.6c20428f.js.map": "/static/js/main.6c20428f.js.map",
     "787.0bfccc2a.chunk.js.map": "/static/js/787.0bfccc2a.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.1e103507.css",
+    "static/js/main.6c20428f.js"
   ]
 }

index.html CHANGED Viewed

@@ -1 +1 @@

- <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="View the like history of a project on huggingface"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Like History</title><script defer="defer" src="/static/js/main.~~fc5d26c1~~.js"></script><link href="/static/css/main.1e103507.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

+ <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="View the like history of a project on huggingface"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Like History</title><script defer="defer" src="/static/js/main.6c20428f.js"></script><link href="/static/css/main.1e103507.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

src/App.js CHANGED Viewed

@@ -3,36 +3,93 @@ import chartXkcd from "chart.xkcd";
 const projectTypes = ["model", "dataset", "space"];
 /**
  * 1. User click enter key
  * 2. Get model/dataset/space name
- * 3. Get data from API
  * 4. Format data(to 20 points at most)
  * 5. Draw line chart
  */
 function App() {
-  const [projectType, setProjectType] = useState("Model");
-  const [projectName, setProjectName] = useState("");
-  const onSubmit = () => {
     const svg = document.querySelector('.line-chart')
-    new chartXkcd.Line(svg, {
-      title: 'Like hitory',
-      xLabel: 'Month',
-      yLabel: '$ Dollars',
       data: {
-        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
         datasets: [{
-          label: 'Plan',
-          data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
-        }, {
-          label: 'Reality',
-          data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
-        }]
       },
-      options: {}
     });
   }
   return (
@@ -54,9 +111,9 @@ function App() {
                 className="h-full rounded-md border-0 bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
                 onChange={(e) => setProjectType(e.target.value)}
               >
-                <option value="model">Model</option>
-                <option value="dataset">Dataset</option>
-                <option value="space">Space</option>
               </select>
             </div>
             <input
@@ -64,12 +121,17 @@ function App() {
               name="phone-number"
               id="phone-number"
               className="block w-full rounded-md border-0 py-1.5 pl-24 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              placeholder="meta-llama/Llama-2-7b"
               value={projectName}
               onChange={(e) => setProjectName(e.target.value)}
-              onKeyDown={(e) => {
                 if (e.key === "Enter") {
-                  onSubmit();
                 }
               }}
             />

 const projectTypes = ["model", "dataset", "space"];
+function transformLikesData(likesData) {
+  // Step 1
+  likesData.sort((a, b) => new Date(a.likedAt) - new Date(b.likedAt));
+  // Step 2
+  const cumulativeLikes = {};
+  let cumulativeCount = 0;
+  // Step 3
+  likesData.forEach(like => {
+    const date = like.likedAt.split('T')[0];
+    cumulativeCount++;
+    cumulativeLikes[date] = cumulativeCount;
+  });
+  // Step 4
+  const transformedData = Object.keys(cumulativeLikes).map(date => ({
+    x: date,
+    y: cumulativeLikes[date].toString()
+  }));
+  return transformedData;
+}
 /**
  * 1. User click enter key
  * 2. Get model/dataset/space name
+ * 3. Get data from API(API format: https://huggingface.co/api/spaces/timqian/like-history/likers?expand[]=likeAt)
  * 4. Format data(to 20 points at most)
  * 5. Draw line chart
  */
 function App() {
+  const [projectType, setProjectType] = useState("models");
+  const [projectName, setProjectName] = useState("openai/whisper-large-v3");
+  const onSubmit = async () => {
     const svg = document.querySelector('.line-chart')
+    const res = await fetch(`https://huggingface.co/api/${projectType}/${projectName}/likers?expand[]=likeAt`)
+    /**
+     * Format:
+     * [{"user": "timqian", "likedAt": "2021-07-01T00:00:00.000Z"}, {"user": "yy", "likedAt": "2021-07-02T00:00:00.000Z"}]
+     */
+    const likers = await res.json()
+    let likeHistory = transformLikesData(likers)
+    if (likeHistory.length > 40) {
+      // sample 20 points
+      const sampledLikeHistory = []
+      const step = Math.floor(likeHistory.length / 40)
+      for (let i = 0; i < likeHistory.length; i += step) {
+        sampledLikeHistory.push(likeHistory[i])
+      }
+      likeHistory = sampledLikeHistory
+    }
+    // if likeHistory is empty, show error message
+    if (likeHistory.length === 0) {
+      alert("No like history found")
+      return
+    }
+    new chartXkcd.XY(svg, {
+      title: 'HF like history',
+      xLabel: 'Time',
+      yLabel: 'Likes',
       data: {
         datasets: [{
+          label: projectName,
+          data: likeHistory,
+        }],
+      },
+      options: {
+        xTickCount: 3,
+        yTickCount: 4,
+        legendPosition: chartXkcd.config.positionType.upLeft,
+        showLine: true,
+        timeFormat: 'MM/DD/YYYY',
+        dotSize: 0.5,
+        dataColors: ["#dd4528",
+          "#28a3dd",
+          "#f3db52"
+        ]
       },
     });
   }
   return (
                 className="h-full rounded-md border-0 bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
                 onChange={(e) => setProjectType(e.target.value)}
               >
+                <option value="models">Model</option>
+                <option value="datasets">Dataset</option>
+                <option value="spaces">Space</option>
               </select>
             </div>
             <input
               name="phone-number"
               id="phone-number"
               className="block w-full rounded-md border-0 py-1.5 pl-24 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              placeholder="openai/whisper-large-v3"
               value={projectName}
               onChange={(e) => setProjectName(e.target.value)}
+              onFocus={(e) => e.target.select()}
+              onKeyDown={async (e) => {
                 if (e.key === "Enter") {
+                  try {
+                    await onSubmit();
+                  } catch (err) {
+                    alert(`No like history found for ${projectName}, please check the name and try again`);
+                  }
                 }
               }}
             />

static/js/main.6c20428f.js ADDED Viewed

The diff for this file is too large to render. See raw diff

static/js/main.6c20428f.js.LICENSE.txt ADDED Viewed

	@@ -0,0 +1,41 @@

+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

static/js/main.6c20428f.js.map ADDED Viewed

The diff for this file is too large to render. See raw diff