like-history / src /App.js
timqian's picture
Add chrome extension like
9be25dc
raw
history blame
6.56 kB
import { useState } from "react";
import chartXkcd from "chart.xkcd";
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
cumulativeCount++;
cumulativeLikes[date] = cumulativeCount;
});
// Step 4
const transformedData = Object.keys(cumulativeLikes).map(date => ({
x: date,
y: cumulativeLikes[date].toString()
}));
return transformedData;
}
const datasets = [];
function App() {
const [projectType, setProjectType] = useState("models");
const [projectName, setProjectName] = useState("");
const [hasGraph, setHasGraph] = useState(false);
const [isLoading, setIsLoading] = useState(false);
// const [datasets, setDatasets] = useState([]);
const onSubmit = async () => {
setIsLoading(true)
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 / 20)
for (let i = 0; i < likeHistory.length; i += step) {
sampledLikeHistory.push(likeHistory[i])
}
// Add the last point if it's not included
if (sampledLikeHistory[sampledLikeHistory.length - 1].x !== likeHistory[likeHistory.length - 1].x) {
sampledLikeHistory.push(likeHistory[likeHistory.length - 1])
}
likeHistory = sampledLikeHistory
}
// if likeHistory is empty, show error message
if (likeHistory.length === 0) {
setIsLoading(false)
alert("No like history found")
return
}
datasets.push({
label: projectName,
data: likeHistory,
})
// draw chart in next tick
// setTimeout(() => {
new chartXkcd.XY(svg, {
title: 'Like History',
xLabel: 'Time',
yLabel: 'Likes',
data: {
datasets,
},
options: {
// unxkcdify: true,
xTickCount: 3,
yTickCount: 4,
legendPosition: chartXkcd.config.positionType.upLeft,
showLine: true,
timeFormat: 'MM/DD/YYYY',
dotSize: 0.5,
dataColors: [
"#FBBF24", // Warm Yellow
"#60A5FA", // Light Blue
"#14B8A6", // Teal
"#A78BFA", // Soft Purple
"#FF8C00", // Orange
"#64748B", // Slate Gray
"#FB7185", // Coral Pink
"#6EE7B7", // Mint Green
"#2563EB", // Deep Blue
"#374151" // Charcoal
]
},
});
setHasGraph(true)
setIsLoading(false)
setProjectName("")
// }, 0.2)
}
return (
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
<div className="mx-auto max-w-3xl">
<h1 className="text-sm font-light right-0 text-right text-gray-600">
View the like history of a project on <span className="font-semibold">huggingface</span> <span className="text-lg">🤗</span>
</h1>
<div>
<div className="relative mt-2 rounded-md shadow-sm">
<div className="absolute inset-y-0 left-0 flex items-center">
<label htmlFor="country" className="sr-only">
Country
</label>
<select
id="country"
name="country"
autoComplete="country"
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
type="text"
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"
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) {
setIsLoading(false);
alert(`No like history found for ${projectName}, please check the name and try again`);
}
}
}}
disabled={isLoading}
/>
{
isLoading &&
<div className="absolute inset-y-0 right-0 flex items-center">
<svg className="animate-spin h-5 w-5 mr-3 text-gray-400" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z">
</path>
</svg>
</div>
}
</div>
</div>
<div className="mt-16 relative min-w-sm">
<svg className="line-chart"></svg>
{
hasGraph &&
<span className="text-slate-500 absolute bottom-0 right-8" style={{ fontFamily: "xkcd" }}>🤗 like-history.ai</span>
}
</div>
<a className={`${!hasGraph ? "mt-64" : "mt-12"} flex gap-x-2 text-slate-600 justify-end items-center text-xl`} href="https://chromewebstore.google.com/detail/like-history/ockfibaidgopelphgdgcnfijdnhnmpek">
<img className="w-6 inline" src="/extension.svg" /> Install the chrome extension
</a>
</div>
</div>
);
}
export default App;