Hugging Face's logo

Spaces:
smolagents
/
computer-use-agent
Running

App Files Community
2
computer-use-agent
File size: 1,452 Bytes 
304e233
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import React from 'react';
import { ConnectionStatus } from './ConnectionStatus';
import { ProcessingIndicator } from './ProcessingIndicator';
import { TaskButton } from './TaskButton';

interface HeaderProps {
  isConnected: boolean;
  isAgentProcessing: boolean;
  onSendTask: (content: string, modelId: string) => void;
}

export const Header: React.FC<HeaderProps> = ({ isConnected, isAgentProcessing, onSendTask }) => {
  return (
    <>
      <div style={{
        flexShrink: 0,
      }}>
        <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '20px 32px' }}>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-6">
              <ConnectionStatus isConnected={isConnected} />
              <h1 className="text-3xl font-bold text-white" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
                CUA2 Agent
              </h1>
            </div>
            <ProcessingIndicator isAgentProcessing={isAgentProcessing} />
          </div>
          <TaskButton
            isAgentProcessing={isAgentProcessing}
            isConnected={isConnected}
            onSendTask={onSendTask}
          />
        </div>
      </div>

      <style>{`
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      `}</style>
    </>
  );
};