Spaces:
Running
Running
File size: 3,060 Bytes
a64395a 7b89082 a64395a 1f122c3 7b89082 1f122c3 7b89082 df83860 a64395a 7b89082 1f122c3 f62b8d3 7b89082 a64395a 7b89082 a3f1817 7b89082 a3f1817 7b89082 b710c3a a3f1817 7b89082 a3f1817 7b89082 1f122c3 7b89082 a64395a 7b89082 a64395a 7b89082 a3f1817 7b89082 a3f1817 7b89082 1f122c3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
"use client"
import { useEffect, useState, useTransition } from "react"
import { useLocalStorage } from "usehooks-ts"
import { useStore } from "@/app/state/useStore"
import { cn } from "@/lib/utils"
import { getChannels } from "@/app/server/actions/ai-tube-hf/getChannels"
import { ChannelList } from "@/app/interface/channel-list"
import { localStorageKeys } from "@/app/state/localStorageKeys"
import { defaultSettings } from "@/app/state/defaultSettings"
import { Input } from "@/components/ui/input"
export function UserAccountView() {
const [_isPending, startTransition] = useTransition()
const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
localStorageKeys.huggingfaceApiKey,
defaultSettings.huggingfaceApiKey
)
const setView = useStore(s => s.setView)
const setUserChannel = useStore(s => s.setUserChannel)
const userChannels = useStore(s => s.userChannels)
const setUserChannels = useStore(s => s.setUserChannels)
const [isLoaded, setLoaded] = useState(false)
useEffect(() => {
if (!isLoaded) {
startTransition(async () => {
try {
const channels = await getChannels({
apiKey: huggingfaceApiKey,
renewCache: true,
})
setUserChannels(channels)
} catch (err) {
console.error("failed to load the channel for the current user:", err)
setUserChannels([])
} finally {
setLoaded(true)
}
})
}
}, [isLoaded, huggingfaceApiKey])
return (
<div className={cn(`flex flex-col space-y-4`)}>
<h2 className="text-3xl font-bold">Want your own channels? Setup your account!</h2>
<div className="flex flex-col space-y-4 max-w-2xl">
<div className="flex flex-row space-x-2 items-center">
<label className="flex w-64">Hugging Face token:</label>
<Input
placeholder="Hugging Face token (with WRITE access)"
type="password"
className="font-mono"
onChange={(x) => {
setHuggingfaceApiKey(x.target.value)
}}
value={huggingfaceApiKey}
/>
</div>
<p className="text-neutral-100/70">
Note: your Hugging Face token must be a <span className="font-bold font-mono text-yellow-300">WRITE</span> access token.
</p>
{huggingfaceApiKey
? <p className="">Nice, looks like you are ready to go!</p>
: <p>Please setup your account (see above) to get started</p>}
</div>
{huggingfaceApiKey ?
<div className="flex flex-col space-y-4">
<h2 className="text-3xl font-bold">Your custom channels:</h2>
{userChannels?.length ? <ChannelList
layout="grid"
channels={userChannels}
onSelect={(userChannel) => {
setUserChannel(userChannel)
setView("user_channel")
}}
/> : <p>Ask <span className="font-mono">@jbilcke-hf</span> for help to create a channel!</p>}
</div> : null}
</div>
)
} |