feat: add beta tag
This commit is contained in:
amhsirak
@@ -267,13 +267,14 @@ const RobotCreate: React.FC = () => {
|
|||||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||||
<PlayCircleOutline sx={{ fontSize: 32, mb: 1 }} />
|
<PlayCircleOutline sx={{ fontSize: 32, mb: 1 }} />
|
||||||
<Typography variant="h6" gutterBottom>
|
<Typography variant="h6" gutterBottom>
|
||||||
Record yourself
|
Manual Mode
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" color="text.secondary">
|
<Typography variant="body2" color="text.secondary">
|
||||||
You control the browser
|
Capture actions step-by-step
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card
|
<Card
|
||||||
onClick={() => setGenerationMode('agent')}
|
onClick={() => setGenerationMode('agent')}
|
||||||
sx={{
|
sx={{
|
||||||
@@ -284,271 +285,289 @@ const RobotCreate: React.FC = () => {
|
|||||||
transition: 'all 0.2s',
|
transition: 'all 0.2s',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
borderColor: '#ff00c3',
|
borderColor: '#ff00c3',
|
||||||
}
|
},
|
||||||
|
position: 'relative'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{/* Beta Tag */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 8,
|
||||||
|
right: 8,
|
||||||
|
background: '#ff00c3',
|
||||||
|
color: '#fff',
|
||||||
|
px: 1,
|
||||||
|
py: 0.3,
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '0.7rem',
|
||||||
|
fontWeight: 600
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Beta
|
||||||
|
</Box>
|
||||||
|
|
||||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||||
<SmartToy sx={{ fontSize: 32, mb: 1 }} />
|
<SmartToy sx={{ fontSize: 32, mb: 1 }} />
|
||||||
<Typography variant="h6" gutterBottom>
|
<Typography variant="h6" gutterBottom>
|
||||||
AI Powered
|
AI Mode
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" color="text.secondary">
|
<Typography variant="body2" color="text.secondary">
|
||||||
AI will take care of everything
|
Describe the task. It builds it for you.
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
{generationMode === 'agent' && (
|
||||||
{generationMode === 'agent' && (
|
<Box sx={{ width: '100%', maxWidth: 700 }}>
|
||||||
<Box sx={{ width: '100%', maxWidth: 700 }}>
|
|
||||||
<Box sx={{ mb: 3 }}>
|
|
||||||
<TextField
|
|
||||||
placeholder="Robot Name"
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
value={extractRobotName}
|
|
||||||
onChange={(e) => setExtractRobotName(e.target.value)}
|
|
||||||
label="Robot Name"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ mb: 3 }}>
|
|
||||||
<TextField
|
|
||||||
placeholder="Example: Extract first 15 company names, descriptions, and batch information"
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
multiline
|
|
||||||
rows={3}
|
|
||||||
value={aiPrompt}
|
|
||||||
onChange={(e) => setAiPrompt(e.target.value)}
|
|
||||||
label="Extraction Prompt"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
|
|
||||||
<FormControl sx={{ flex: 1 }}>
|
|
||||||
<InputLabel>LLM Provider</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={llmProvider}
|
|
||||||
label="LLM Provider"
|
|
||||||
onChange={(e) => {
|
|
||||||
const provider = e.target.value as 'anthropic' | 'openai' | 'ollama';
|
|
||||||
setLlmProvider(provider);
|
|
||||||
setLlmModel('');
|
|
||||||
if (provider === 'ollama') {
|
|
||||||
setLlmBaseUrl('http://localhost:11434');
|
|
||||||
} else {
|
|
||||||
setLlmBaseUrl('');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value="ollama">Ollama (Local)</MenuItem>
|
|
||||||
<MenuItem value="anthropic">Anthropic (Claude)</MenuItem>
|
|
||||||
<MenuItem value="openai">OpenAI (GPT-4)</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormControl sx={{ flex: 1 }}>
|
|
||||||
<InputLabel>Model</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={llmModel}
|
|
||||||
label="Model"
|
|
||||||
onChange={(e) => setLlmModel(e.target.value)}
|
|
||||||
>
|
|
||||||
{llmProvider === 'ollama' && (
|
|
||||||
<>
|
|
||||||
<MenuItem value="">Default (llama3.2-vision)</MenuItem>
|
|
||||||
<MenuItem value="llama3.2-vision">llama3.2-vision</MenuItem>
|
|
||||||
<MenuItem value="llama3.2">llama3.2</MenuItem>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{llmProvider === 'anthropic' && (
|
|
||||||
<>
|
|
||||||
<MenuItem value="">Default (claude-3-5-sonnet)</MenuItem>
|
|
||||||
<MenuItem value="claude-3-5-sonnet-20241022">claude-3-5-sonnet-20241022</MenuItem>
|
|
||||||
<MenuItem value="claude-3-opus-20240229">claude-3-opus-20240229</MenuItem>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{llmProvider === 'openai' && (
|
|
||||||
<>
|
|
||||||
<MenuItem value="">Default (gpt-4-vision-preview)</MenuItem>
|
|
||||||
<MenuItem value="gpt-4-vision-preview">gpt-4-vision-preview</MenuItem>
|
|
||||||
<MenuItem value="gpt-4o">gpt-4o</MenuItem>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* API Key for non-Ollama providers */}
|
|
||||||
{llmProvider !== 'ollama' && (
|
|
||||||
<Box sx={{ mb: 3 }}>
|
<Box sx={{ mb: 3 }}>
|
||||||
<TextField
|
<TextField
|
||||||
placeholder={`${llmProvider === 'anthropic' ? 'Anthropic' : 'OpenAI'} API Key`}
|
placeholder="Robot Name"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
fullWidth
|
fullWidth
|
||||||
type="password"
|
value={extractRobotName}
|
||||||
value={llmApiKey}
|
onChange={(e) => setExtractRobotName(e.target.value)}
|
||||||
onChange={(e) => setLlmApiKey(e.target.value)}
|
label="Robot Name"
|
||||||
label="API Key (Optional if set in .env)"
|
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
|
||||||
|
|
||||||
{llmProvider === 'ollama' && (
|
|
||||||
<Box sx={{ mb: 3 }}>
|
<Box sx={{ mb: 3 }}>
|
||||||
<TextField
|
<TextField
|
||||||
placeholder="http://localhost:11434"
|
placeholder="Example: Extract first 15 company names, descriptions, and batch information"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
fullWidth
|
fullWidth
|
||||||
value={llmBaseUrl}
|
multiline
|
||||||
onChange={(e) => setLlmBaseUrl(e.target.value)}
|
rows={3}
|
||||||
label="Ollama Base URL (Optional)"
|
value={aiPrompt}
|
||||||
|
onChange={(e) => setAiPrompt(e.target.value)}
|
||||||
|
label="Extraction Prompt"
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
<Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
|
||||||
variant="contained"
|
<FormControl sx={{ flex: 1 }}>
|
||||||
fullWidth
|
<InputLabel>LLM Provider</InputLabel>
|
||||||
onClick={async () => {
|
<Select
|
||||||
if (!url.trim()) {
|
value={llmProvider}
|
||||||
notify('error', 'Please enter a valid URL');
|
label="LLM Provider"
|
||||||
return;
|
onChange={(e) => {
|
||||||
}
|
const provider = e.target.value as 'anthropic' | 'openai' | 'ollama';
|
||||||
if (!extractRobotName.trim()) {
|
setLlmProvider(provider);
|
||||||
notify('error', 'Please enter a robot name');
|
setLlmModel('');
|
||||||
return;
|
if (provider === 'ollama') {
|
||||||
}
|
setLlmBaseUrl('http://localhost:11434');
|
||||||
if (!aiPrompt.trim()) {
|
} else {
|
||||||
notify('error', 'Please enter an extraction prompt');
|
setLlmBaseUrl('');
|
||||||
return;
|
}
|
||||||
}
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="ollama">Ollama (Local)</MenuItem>
|
||||||
|
<MenuItem value="anthropic">Anthropic (Claude)</MenuItem>
|
||||||
|
<MenuItem value="openai">OpenAI (GPT-4)</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
const tempRobotId = `temp-${Date.now()}`;
|
<FormControl sx={{ flex: 1 }}>
|
||||||
const robotDisplayName = extractRobotName;
|
<InputLabel>Model</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={llmModel}
|
||||||
|
label="Model"
|
||||||
|
onChange={(e) => setLlmModel(e.target.value)}
|
||||||
|
>
|
||||||
|
{llmProvider === 'ollama' && (
|
||||||
|
<>
|
||||||
|
<MenuItem value="">Default (llama3.2-vision)</MenuItem>
|
||||||
|
<MenuItem value="llama3.2-vision">llama3.2-vision</MenuItem>
|
||||||
|
<MenuItem value="llama3.2">llama3.2</MenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{llmProvider === 'anthropic' && (
|
||||||
|
<>
|
||||||
|
<MenuItem value="">Default (claude-3-5-sonnet)</MenuItem>
|
||||||
|
<MenuItem value="claude-3-5-sonnet-20241022">claude-3-5-sonnet-20241022</MenuItem>
|
||||||
|
<MenuItem value="claude-3-opus-20240229">claude-3-opus-20240229</MenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{llmProvider === 'openai' && (
|
||||||
|
<>
|
||||||
|
<MenuItem value="">Default (gpt-4-vision-preview)</MenuItem>
|
||||||
|
<MenuItem value="gpt-4-vision-preview">gpt-4-vision-preview</MenuItem>
|
||||||
|
<MenuItem value="gpt-4o">gpt-4o</MenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
|
||||||
const optimisticRobot = {
|
{/* API Key for non-Ollama providers */}
|
||||||
id: tempRobotId,
|
{llmProvider !== 'ollama' && (
|
||||||
recording_meta: {
|
<Box sx={{ mb: 3 }}>
|
||||||
id: tempRobotId,
|
<TextField
|
||||||
name: robotDisplayName,
|
placeholder={`${llmProvider === 'anthropic' ? 'Anthropic' : 'OpenAI'} API Key`}
|
||||||
createdAt: new Date().toISOString(),
|
variant="outlined"
|
||||||
updatedAt: new Date().toISOString(),
|
fullWidth
|
||||||
pairs: 0,
|
type="password"
|
||||||
params: [],
|
value={llmApiKey}
|
||||||
type: 'extract',
|
onChange={(e) => setLlmApiKey(e.target.value)}
|
||||||
url: url,
|
label="API Key (Optional if set in .env)"
|
||||||
},
|
/>
|
||||||
recording: { workflow: [] },
|
</Box>
|
||||||
isLoading: true,
|
)}
|
||||||
isOptimistic: true
|
|
||||||
};
|
|
||||||
|
|
||||||
addOptimisticRobot(optimisticRobot);
|
{llmProvider === 'ollama' && (
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<TextField
|
||||||
|
placeholder="http://localhost:11434"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
value={llmBaseUrl}
|
||||||
|
onChange={(e) => setLlmBaseUrl(e.target.value)}
|
||||||
|
label="Ollama Base URL (Optional)"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
notify('info', `Robot ${robotDisplayName} creation started`);
|
<Button
|
||||||
navigate('/robots');
|
variant="contained"
|
||||||
|
fullWidth
|
||||||
try {
|
onClick={async () => {
|
||||||
const result = await createLLMRobot(
|
if (!url.trim()) {
|
||||||
url,
|
notify('error', 'Please enter a valid URL');
|
||||||
aiPrompt,
|
return;
|
||||||
llmProvider,
|
}
|
||||||
llmModel || undefined,
|
if (!extractRobotName.trim()) {
|
||||||
llmApiKey || undefined,
|
notify('error', 'Please enter a robot name');
|
||||||
llmBaseUrl || undefined,
|
return;
|
||||||
extractRobotName
|
}
|
||||||
);
|
if (!aiPrompt.trim()) {
|
||||||
|
notify('error', 'Please enter an extraction prompt');
|
||||||
removeOptimisticRobot(tempRobotId);
|
|
||||||
|
|
||||||
if (!result || !result.robot) {
|
|
||||||
notify('error', 'Failed to create AI robot. Please check your LLM configuration.');
|
|
||||||
invalidateRecordings();
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const robotMetaId = result.robot.recording_meta.id;
|
const tempRobotId = `temp-${Date.now()}`;
|
||||||
const robotName = result.robot.recording_meta.name;
|
const robotDisplayName = extractRobotName;
|
||||||
|
|
||||||
invalidateRecordings();
|
const optimisticRobot = {
|
||||||
notify('success', `${robotName} created successfully!`);
|
id: tempRobotId,
|
||||||
|
recording_meta: {
|
||||||
const optimisticRun = {
|
id: tempRobotId,
|
||||||
id: robotMetaId,
|
name: robotDisplayName,
|
||||||
runId: `temp-${Date.now()}`,
|
createdAt: new Date().toISOString(),
|
||||||
status: 'running',
|
updatedAt: new Date().toISOString(),
|
||||||
name: robotName,
|
pairs: 0,
|
||||||
startedAt: new Date().toISOString(),
|
params: [],
|
||||||
finishedAt: '',
|
type: 'extract',
|
||||||
robotMetaId: robotMetaId,
|
url: url,
|
||||||
log: 'Starting...',
|
},
|
||||||
|
recording: { workflow: [] },
|
||||||
|
isLoading: true,
|
||||||
isOptimistic: true
|
isOptimistic: true
|
||||||
};
|
};
|
||||||
|
|
||||||
addOptimisticRun(optimisticRun);
|
addOptimisticRobot(optimisticRobot);
|
||||||
|
|
||||||
const runResponse = await createAndRunRecording(robotMetaId, {
|
notify('info', `Robot ${robotDisplayName} creation started`);
|
||||||
maxConcurrency: 1,
|
navigate('/robots');
|
||||||
maxRepeats: 1,
|
|
||||||
debug: false
|
|
||||||
});
|
|
||||||
|
|
||||||
invalidateRuns();
|
try {
|
||||||
|
const result = await createLLMRobot(
|
||||||
|
url,
|
||||||
|
aiPrompt,
|
||||||
|
llmProvider,
|
||||||
|
llmModel || undefined,
|
||||||
|
llmApiKey || undefined,
|
||||||
|
llmBaseUrl || undefined,
|
||||||
|
extractRobotName
|
||||||
|
);
|
||||||
|
|
||||||
if (runResponse && runResponse.runId) {
|
removeOptimisticRobot(tempRobotId);
|
||||||
await new Promise(resolve => setTimeout(resolve, 300));
|
|
||||||
navigate(`/runs/${robotMetaId}/run/${runResponse.runId}`);
|
if (!result || !result.robot) {
|
||||||
notify('info', `Run started: ${robotName}`);
|
notify('error', 'Failed to create AI robot. Please check your LLM configuration.');
|
||||||
} else {
|
invalidateRecordings();
|
||||||
notify('warning', 'Robot created but failed to start execution.');
|
return;
|
||||||
navigate('/robots');
|
}
|
||||||
|
|
||||||
|
const robotMetaId = result.robot.recording_meta.id;
|
||||||
|
const robotName = result.robot.recording_meta.name;
|
||||||
|
|
||||||
|
invalidateRecordings();
|
||||||
|
notify('success', `${robotName} created successfully!`);
|
||||||
|
|
||||||
|
const optimisticRun = {
|
||||||
|
id: robotMetaId,
|
||||||
|
runId: `temp-${Date.now()}`,
|
||||||
|
status: 'running',
|
||||||
|
name: robotName,
|
||||||
|
startedAt: new Date().toISOString(),
|
||||||
|
finishedAt: '',
|
||||||
|
robotMetaId: robotMetaId,
|
||||||
|
log: 'Starting...',
|
||||||
|
isOptimistic: true
|
||||||
|
};
|
||||||
|
|
||||||
|
addOptimisticRun(optimisticRun);
|
||||||
|
|
||||||
|
const runResponse = await createAndRunRecording(robotMetaId, {
|
||||||
|
maxConcurrency: 1,
|
||||||
|
maxRepeats: 1,
|
||||||
|
debug: false
|
||||||
|
});
|
||||||
|
|
||||||
|
invalidateRuns();
|
||||||
|
|
||||||
|
if (runResponse && runResponse.runId) {
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 300));
|
||||||
|
navigate(`/runs/${robotMetaId}/run/${runResponse.runId}`);
|
||||||
|
notify('info', `Run started: ${robotName}`);
|
||||||
|
} else {
|
||||||
|
notify('warning', 'Robot created but failed to start execution.');
|
||||||
|
navigate('/robots');
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Error in AI robot creation:', error);
|
||||||
|
removeOptimisticRobot(tempRobotId);
|
||||||
|
invalidateRecordings();
|
||||||
|
notify('error', error?.message || 'Failed to create and run AI robot');
|
||||||
}
|
}
|
||||||
} catch (error: any) {
|
}}
|
||||||
console.error('Error in AI robot creation:', error);
|
disabled={!url.trim() || !extractRobotName.trim() || !aiPrompt.trim() || isLoading}
|
||||||
removeOptimisticRobot(tempRobotId);
|
sx={{
|
||||||
invalidateRecordings();
|
bgcolor: '#ff00c3',
|
||||||
notify('error', error?.message || 'Failed to create and run AI robot');
|
py: 1.4,
|
||||||
}
|
fontSize: '1rem',
|
||||||
}}
|
textTransform: 'none',
|
||||||
disabled={!url.trim() || !extractRobotName.trim() || !aiPrompt.trim() || isLoading}
|
borderRadius: 2
|
||||||
sx={{
|
}}
|
||||||
bgcolor: '#ff00c3',
|
startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
|
||||||
py: 1.4,
|
>
|
||||||
fontSize: '1rem',
|
{isLoading ? 'Creating & Running...' : 'Create & Run Robot'}
|
||||||
textTransform: 'none',
|
</Button>
|
||||||
borderRadius: 2
|
</Box>
|
||||||
}}
|
)}
|
||||||
startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
|
|
||||||
>
|
|
||||||
{isLoading ? 'Creating & Running...' : 'Create & Run Robot'}
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{generationMode === 'recorder' && (
|
{generationMode === 'recorder' && (
|
||||||
<Box sx={{ width: '100%', maxWidth: 700 }}>
|
<Box sx={{ width: '100%', maxWidth: 700 }}>
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
fullWidth
|
fullWidth
|
||||||
onClick={handleStartRecording}
|
onClick={handleStartRecording}
|
||||||
disabled={!url.trim() || isLoading}
|
disabled={!url.trim() || isLoading}
|
||||||
sx={{
|
sx={{
|
||||||
bgcolor: '#ff00c3',
|
bgcolor: '#ff00c3',
|
||||||
py: 1.4,
|
py: 1.4,
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
textTransform: 'none',
|
textTransform: 'none',
|
||||||
borderRadius: 2
|
borderRadius: 2
|
||||||
}}
|
}}
|
||||||
startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
|
startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
|
||||||
>
|
>
|
||||||
{isLoading ? 'Starting...' : 'Start Recording'}
|
{isLoading ? 'Starting...' : 'Start Recording'}
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
</Card>
|
</Card>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user