FlyEnv/test.html at master · mabdelli/FlyEnv · GitHub

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Synthesis and Progress Query</title>
  <!-- Use domestic Tailwind CSS CDN -->
  <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/3.3.5/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
  <h1 class="text-2xl font-bold mb-4">Video Synthesis and Progress Query</h1>

  <!-- URL Configuration Section -->
  <div class="bg-white p-6 rounded-lg shadow-md mb-6">
    <h2 class="text-xl font-semibold mb-4">API Configuration</h2>
    <div class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700">Server Address (IP + Port)</label>
        <input type="text" id="serverUrl" value="192.168.2.100:8383" placeholder="e.g., 127.0.0.1:8383" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
      </div>
    </div>
  </div>

  <!-- Video Synthesis Section -->
  <div class="bg-white p-6 rounded-lg shadow-md mb-6">
    <h2 class="text-xl font-semibold mb-4">Video Synthesis</h2>
    <form id="synthesisForm" class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700">Audio File</label>
        <input type="file" id="audioFile" name="audioFile" accept="audio/*" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700">Video File</label>
        <input type="file" id="videoFile" name="videoFile" accept="video/*" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
      </div>
      <div class="hidden">
        <label class="block text-sm font-medium text-gray-700">Unique KG</label>
        <input type="text" id="code" name="code" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
      </div>
      <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Start Synthesis</button>
    </form>
  </div>

  <!-- Progress Query Section -->
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4">Progress Query</h2>
    <div id="progressResult" class="mt-4">
      <p class="text-gray-700">After submitting the task, the progress will be displayed here automatically.</p>
    </div>
  </div>
</div>

<!-- Use domestic Axios CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.2/axios.min.js"></script>
<script>
  // Generate Unique ID (UUID)
  function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      const r = Math.random() * 16 | 0;
      const v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  // Automatically generate a unique ID and fill it into the input box
  document.addEventListener('DOMContentLoaded', function() {
    const codeInput = document.getElementById('code');
    codeInput.value = generateUUID();
  });

  // Convert file to Base64 encoding
  function fileToBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result.split(',')[1]); // Remove Data URL prefix
      reader.onerror = error => reject(error);
    });
  }

  // Poll task progress
  function pollTaskProgress(taskCode, queryUrl) {
    const interval = setInterval(async () => {
      try {
        const response = await axios.get(`${queryUrl}?code=${taskCode}`);
        const progressResult = document.getElementById('progressResult');
        progressResult.innerHTML = `<p class="text-green-600">Task Progress: ${JSON.stringify(response.data)}</p>`;

        // If the task is completed, stop polling
        if (response.data.status === 'completed') {
          clearInterval(interval);
          progressResult.innerHTML = `<p class="text-green-600">Task Completed: ${JSON.stringify(response.data)}</p>`;
        }
      } catch (error) {
        console.error('Task progress query failed', error);
        clearInterval(interval);
        document.getElementById('progressResult').innerHTML = `<p class="text-red-600">Task progress query failed, please check the console.</p>`;
      }
    }, 3000); // Query every 3 seconds
  }

  // Video synthesis form submission event
  document.getElementById('synthesisForm').addEventListener('submit', async function(event) {
    event.preventDefault();

    const audioFile = document.getElementById('audioFile').files[0];
    const videoFile = document.getElementById('videoFile').files[0];
    const code = document.getElementById('code').value;
    const serverUrl = document.getElementById('serverUrl').value;

    // Ensure audio and video files are selected
    // Ensure server address (IP + Port) is filled

    // if (!audioFile || !videoFile) {
    //   alert('Please ensure that audio and video files are selected');
    //   return;
    // }
    //
    // if (!serverUrl) {
    //   alert('Please fill in the server address (IP + Port)');
    //   return;
    // }

    // Construct the complete API URL
    const submitUrl = `http://${serverUrl}/easy/submit`;
    const queryUrl = `http://${serverUrl}/easy/query`;

    try {
      // Convert files to Base64
      // const audioBase64 = await fileToBase64(audioFile);
      // const videoBase64 = await fileToBase64(videoFile);

      // Build JSON request body
      const requestBody = {
        audio_url: "file://D:/video/16.mp3",
        video_url: "file://D:/video/ceshi.mp4",
        code: code,
        chaofen: 0,
        watermark_switch: 0,
        pn: 1
      };

      // Send JSON request
      const response = await axios.post(submitUrl, requestBody, {
        headers: {
          'Content-Type': 'application/json'
        }
      });

      // After successful submission, start polling task progress
      document.getElementById('progressResult').innerHTML = `<p class="text-blue-600">Task Submitted, Task Code: ${code}</p>`;
      pollTaskProgress(code, queryUrl);
    } catch (error) {
      console.error('Task submission failed', error);
      document.getElementById('progressResult').innerHTML = `<p class="text-red-600">Task submission failed, please check the console.</p>`;
    }
  });
</script>
</body>
</html>