feat: Initialize frontend with React, Vite, and Tailwind CSS

- Set up main entry point for React application.
- Create About, Home, NotFound, Privacy, and Terms pages with SEO support.
- Implement API service for file uploads and task management.
- Add global styles using Tailwind CSS.
- Create utility functions for SEO and text processing.
- Configure Vite for development and production builds.
- Set up Nginx configuration for serving frontend and backend.
- Add scripts for cleanup of expired files and sitemap generation.
- Implement deployment script for production environment.

frontend/src/services/api.ts

@@ -0,0 +1,114 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+  timeout: 120000, // 2 minute timeout for file processing
+  headers: {
+    Accept: 'application/json',
+  },
+});
+
+// Request interceptor for logging
+api.interceptors.request.use(
+  (config) => config,
+  (error) => Promise.reject(error)
+);
+
+// Response interceptor for error handling
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response) {
+      const message = error.response.data?.error || 'An error occurred.';
+      return Promise.reject(new Error(message));
+    }
+    if (error.request) {
+      return Promise.reject(new Error('Network error. Please check your connection.'));
+    }
+    return Promise.reject(error);
+  }
+);
+
+// --- API Functions ---
+
+export interface TaskResponse {
+  task_id: string;
+  message: string;
+}
+
+export interface TaskStatus {
+  task_id: string;
+  state: 'PENDING' | 'PROCESSING' | 'SUCCESS' | 'FAILURE';
+  progress?: string;
+  result?: TaskResult;
+  error?: string;
+}
+
+export interface TaskResult {
+  status: 'completed' | 'failed';
+  download_url?: string;
+  filename?: string;
+  error?: string;
+  original_size?: number;
+  compressed_size?: number;
+  reduction_percent?: number;
+  width?: number;
+  height?: number;
+  output_size?: number;
+  duration?: number;
+  fps?: number;
+  format?: string;
+}
+
+/**
+ * Upload a file and start a processing task.
+ */
+export async function uploadFile(
+  endpoint: string,
+  file: File,
+  extraData?: Record<string, string>,
+  onProgress?: (percent: number) => void
+): Promise<TaskResponse> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  if (extraData) {
+    Object.entries(extraData).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+  }
+
+  const response = await api.post<TaskResponse>(endpoint, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+    onUploadProgress: (event) => {
+      if (event.total && onProgress) {
+        const percent = Math.round((event.loaded / event.total) * 100);
+        onProgress(percent);
+      }
+    },
+  });
+
+  return response.data;
+}
+
+/**
+ * Poll task status.
+ */
+export async function getTaskStatus(taskId: string): Promise<TaskStatus> {
+  const response = await api.get<TaskStatus>(`/tasks/${taskId}/status`);
+  return response.data;
+}
+
+/**
+ * Check API health.
+ */
+export async function checkHealth(): Promise<boolean> {
+  try {
+    const response = await api.get('/health');
+    return response.data.status === 'healthy';
+  } catch {
+    return false;
+  }
+}
+
+export default api;