Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,167 Bytes
d985ebc 4d38e50 d985ebc 4d38e50 d985ebc |
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 86 87 88 89 90 91 |
import React, { useRef, useEffect, useState } from 'react'
import { InformationCircleIcon, DocumentTextIcon } from '@heroicons/react/24/outline'
import GitHubIcon from './icons/GitHubIcon'
import { Tooltip as ReactTooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'
import Descriptions from '../Descriptions'
interface ModelInfoIconProps {
modelName: string
}
const ModelInfoIcon: React.FC<ModelInfoIconProps> = ({ modelName }) => {
const [descriptionsLoaded, setDescriptionsLoaded] = useState(false)
const descriptions = useRef(Descriptions.getInstance())
useEffect(() => {
descriptions.current.load().then(() => setDescriptionsLoaded(true))
}, [])
const fullName = descriptions.current.getModelFullName(modelName) || modelName
const description = descriptions.current.getModelDescription(modelName)
const paperUrl = descriptions.current.getModelPaperUrl(modelName)
const githubUrl = descriptions.current.getModelGithubUrl(modelName)
const messageSize = descriptions.current.getModelMessageSize(modelName)
return (
<>
<span
className="ml-1 cursor-pointer"
data-tooltip-id={`tooltip-${modelName}`}
tabIndex={0}
aria-label={`Show info for ${modelName}`}
role="button"
>
<InformationCircleIcon className="h-4 w-4 text-blue-400 hover:text-blue-600" />
</span>
<ReactTooltip
id={`tooltip-${modelName}`}
place="top"
className="z-[10000] max-w-xs !opacity-100 bg-base-100 text-base-content"
style={{
boxShadow: '0 0 10px rgba(0,0,0,0.2)',
zIndex: 10000, // Ensure tooltips appear above sticky elements
}}
openOnClick={false}
clickable={true}
delayHide={200}
positionStrategy="fixed"
>
<div className="p-2 text-xs text-left relative z-[10000]">
<div className="font-semibold mb-1">{fullName}</div>
<div className="mb-2 whitespace-pre-line">
{description || 'No description available.'}
</div>
{messageSize !== undefined && <div className="mb-2">Message Size: {messageSize}</div>}
<div className="flex space-x-4">
{paperUrl && (
<div>
<a
href={paperUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:text-blue-300 underline flex items-center"
>
<DocumentTextIcon className="h-3 w-3 mr-1" />
Paper
</a>
</div>
)}
{githubUrl && (
<div>
<a
href={githubUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:text-blue-300 underline flex items-center"
>
<GitHubIcon className="h-3 w-3 mr-1" />
GitHub
</a>
</div>
)}
</div>
</div>
</ReactTooltip>
</>
)
}
export default ModelInfoIcon
|