Enable download for endpoint logs (#975)

* feat(EndpointLogs): update styles and add placeholder

- Change select width to utility class
- Add placeholder paragraph in logs section

* fix(EndpointLogs): update class binding for select

- Add ! to width class
- Ensure proper styling behavior

* feat(endpoint-logs): add log download feature

- Added download button for logs
- Implemented log download functionality
- Updated English and Chinese translations

Author: hiveer

frontend/src/components/endpoints/EndpointLogs.vue

@@ -1,22 +1,28 @@
 <template>
   <div class="my-[16px]">
-    <el-select
-      v-model="currentInstance"
-      placeholder="Select"
-      style="width: 240px"
-      @change="refreshInstanceLogs"
-    >
-      <el-option
-        v-for="instance in instances"
-        :key="instance.name"
-        :label="instance.name"
-        :value="instance.name"
-      />
-    </el-select>
+    <div class="flex justify-between items-center">
+      <el-select
+        v-model="currentInstance"
+        placeholder="Select"
+        class="!w-[240px] mb-1"
+        @change="refreshInstanceLogs"
+      >
+        <el-option
+          v-for="instance in instances"
+          :key="instance.name"
+          :label="instance.name"
+          :value="instance.name"
+        />
+      </el-select>
+      <div class="cursor-pointer text-xs px-4 text-brand-700 font-normal" @click="downloadLog">
+        {{ $t('endpoints.logDownload') }}
+      </div>
+    </div>
     <div
       class="h-[80vh] border bg-gray-800 p-6 rounded-xl text-white overflow-scroll"
       ref="instanceLogDiv"
     >
+      <p>...</p>
     </div>
   </div>
 </template>
@@ -126,6 +132,24 @@
     }
   }
 
+  const downloadLog = () => {
+    const targetDiv = instanceLogDiv;
+    if (!targetDiv.value) return;
+
+    const logElements = targetDiv.value.querySelectorAll('p');
+    let logContent = '';
+    logElements.forEach((element) => {
+      logContent += element.textContent + '\n';
+    });
+
+    const blob = new Blob([logContent], { type: 'text/plain' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = 'inference_deploy_log.txt'
+    link.click();
+    URL.revokeObjectURL(link.href);
+  };
+
   const refreshInstanceLogs = (value) => {
     syncInstanceLogs(value)
   }

frontend/src/locales/en_js/endpoints.js

@@ -3,6 +3,7 @@ export const endpoints = {
   resourceType: 'Resource Type',
   replica: "Replica",
   summary: 'Overview',
+  logDownload: 'Download Logs',
   detail: {
     endpointUrl: 'Inference Endpoint URL',
     modelId: 'Model ID',

frontend/src/locales/zh_js/endpoints.js

@@ -3,6 +3,7 @@ export const endpoints = {
   resourceType: '资源类型',
   replica: "弹性副本",
   summary: '概览',
+  logDownload: '下载日志',
   detail: {
     endpointUrl: '专属实例 URL',
     modelId: '模型 ID',