Spaces:
Running
Running
File size: 5,630 Bytes
16d4b20 |
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
import React, { useState } from 'react';
import { Key, FolderGit2, CheckCircle2, AlertCircle, Database, Box, Layout } from 'lucide-react';
import { HFConfig, RepoType } from '../types';
interface ConfigPanelProps {
config: HFConfig;
onConfigChange: (newConfig: HFConfig) => void;
}
export const ConfigPanel: React.FC<ConfigPanelProps> = ({ config, onConfigChange }) => {
const [showToken, setShowToken] = useState(false);
const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onConfigChange({ ...config, token: e.target.value });
};
const handleRepoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onConfigChange({ ...config, repo: e.target.value });
};
const handleTypeChange = (type: RepoType) => {
onConfigChange({ ...config, repoType: type });
};
const isValid = config.token.length > 0 && config.repo.includes('/');
return (
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<h2 className="text-xl font-semibold mb-4 text-gray-800 flex items-center gap-2">
<Key className="w-5 h-5 text-yellow-500" />
Authentication & Target
</h2>
<div className="space-y-5">
{/* Repo Type Selector */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Repository Type
</label>
<div className="flex bg-gray-100 p-1 rounded-lg">
<button
onClick={() => handleTypeChange('model')}
className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all ${
config.repoType === 'model'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
<Box className="w-4 h-4" />
Model
</button>
<button
onClick={() => handleTypeChange('dataset')}
className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all ${
config.repoType === 'dataset'
? 'bg-white text-red-600 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
<Database className="w-4 h-4" />
Dataset
</button>
<button
onClick={() => handleTypeChange('space')}
className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all ${
config.repoType === 'space'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
<Layout className="w-4 h-4" />
Space
</button>
</div>
</div>
{/* Token Input */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Hugging Face Access Token (Write)
</label>
<div className="relative">
<input
type={showToken ? "text" : "password"}
value={config.token}
onChange={handleTokenChange}
placeholder="hf_..."
className="w-full pl-10 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent outline-none transition-all"
/>
<Key className="absolute left-3 top-2.5 w-4 h-4 text-gray-400" />
<button
type="button"
onClick={() => setShowToken(!showToken)}
className="absolute right-3 top-2.5 text-xs font-semibold text-gray-500 hover:text-gray-700"
>
{showToken ? "HIDE" : "SHOW"}
</button>
</div>
<p className="mt-1 text-xs text-gray-500">
Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">HF Settings</a>. Ensure it has <strong>WRITE</strong> permissions.
</p>
</div>
{/* Repo Input */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Repository ID
</label>
<div className="relative">
<input
type="text"
value={config.repo}
onChange={handleRepoChange}
placeholder={config.repoType === 'space' ? "username/space-name" : (config.repoType === 'dataset' ? "username/dataset-name" : "username/model-name")}
className="w-full pl-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent outline-none transition-all"
/>
<FolderGit2 className="absolute left-3 top-2.5 w-4 h-4 text-gray-400" />
</div>
<p className="mt-1 text-xs text-gray-500">
Targeting: <span className="font-semibold capitalize">{config.repoType}</span>. Example: <code>jdoe/my-{config.repoType}</code>
</p>
</div>
<div className={`flex items-center gap-2 text-sm p-3 rounded-lg ${isValid ? 'bg-green-50 text-green-700 border border-green-100' : 'bg-gray-50 text-gray-500 border border-gray-200'}`}>
{isValid ? <CheckCircle2 className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
{isValid ? `Ready to upload to ${config.repoType}` : "Enter a valid token and repo ID to start."}
</div>
</div>
</div>
);
};
|