debug network

custom/conf/app.ini.sample

@@ -1071,7 +1071,8 @@ HOST     = http://192.168.207.84:3002/
 COMMIT_VALID_DATE = 2021-01-15
 
 [obs]
-ENDPOINT = 112.95.163.82
+#ENDPOINT = 112.95.163.82
+ENDPOINT = https://obs.cn-south-222.ai.pcl.cn
 ACCESS_KEY_ID = FDP3LRMHLB9S77VWEHE3
 SECRET_ACCESS_KEY = LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN
 BUCKET = testopendata
@@ -1079,7 +1080,8 @@ LOCATION = cn-south-222
 BASE_PATH = attachment/
 
 [modelarts]
-ENDPOINT = 112.95.163.80
+#ENDPOINT = 112.95.163.80
+ENDPOINT = https://modelarts.cn-south-222.ai.pcl.cn
 PROJECT_ID = edfccf24aace4e17a56da6bcbb55a5aa
 PROJECT_NAME = cn-south-222_test
 USERNAME = test1

models/attachment.go

@@ -351,7 +351,7 @@ func GetUnDecompressAttachments() ([]*Attachment, error) {
 
 func getUnDecompressAttachments(e Engine) ([]*Attachment, error) {
 	attachments := make([]*Attachment, 0, 10)
-	return attachments, e.Where("decompress_state = ? and dataset_id != 0 and type = ? and name like '%.zip'", DecompressStateInit, TypeCloudBrainOne).Find(&attachments)
+	return attachments, e.Where("decompress_state = ? and dataset_id != 0 and attachment.type = ? and name like '%.zip'", DecompressStateInit, TypeCloudBrainOne).Find(&attachments)
 }
 
 func GetAllPublicAttachments() ([]*AttachmentUsername, error) {
@@ -361,7 +361,7 @@ func GetAllPublicAttachments() ([]*AttachmentUsername, error) {
 func getAllPublicAttachments(e Engine) ([]*AttachmentUsername, error) {
 	attachments := make([]*AttachmentUsername, 0, 10)
 	if err := e.Table("attachment").Join("LEFT", "`user`", "attachment.uploader_id "+
-		"= `user`.id").Where("decompress_state= ? and is_private= ? and type = ?", DecompressStateDone, false, TypeCloudBrainOne).Find(&attachments); err != nil {
+		"= `user`.id").Where("decompress_state= ? and is_private= ? and attachment.type = ?", DecompressStateDone, false, TypeCloudBrainOne).Find(&attachments); err != nil {
 		return nil, err
 	}
 	return attachments, nil
@@ -379,7 +379,7 @@ func GetPrivateAttachments(username string) ([]*AttachmentUsername, error) {
 func getPrivateAttachments(e Engine, userID int64) ([]*AttachmentUsername, error) {
 	attachments := make([]*AttachmentUsername, 0, 10)
 	if err := e.Table("attachment").Join("LEFT", "`user`", "attachment.uploader_id "+
-		"= `user`.id").Where("decompress_state= ? and uploader_id= ? and type = ?", DecompressStateDone, userID, TypeCloudBrainOne).Find(&attachments); err != nil {
+		"= `user`.id").Where("decompress_state= ? and uploader_id= ? and attachment.type = ?", DecompressStateDone, userID, TypeCloudBrainOne).Find(&attachments); err != nil {
 		return nil, err
 	}
 	return attachments, nil
@@ -388,7 +388,7 @@ func getPrivateAttachments(e Engine, userID int64) ([]*AttachmentUsername, error
 func getAllUserAttachments(e Engine, userID int64) ([]*AttachmentUsername, error) {
 	attachments := make([]*AttachmentUsername, 0, 10)
 	if err := e.Table("attachment").Join("LEFT", "`user`", "attachment.uploader_id "+
-		"= `user`.id").Where("decompress_state= ? and type = ? and (uploader_id= ? or is_private = ?)", DecompressStateDone, TypeCloudBrainOne, userID, false).Find(&attachments); err != nil {
+		"= `user`.id").Where("decompress_state= ? and attachment.type = ? and (uploader_id= ? or is_private = ?)", DecompressStateDone, TypeCloudBrainOne, userID, false).Find(&attachments); err != nil {
 		return nil, err
 	}
 	return attachments, nil
@@ -401,7 +401,7 @@ func GetAllUserAttachments(userID int64) ([]*AttachmentUsername, error) {
 func getModelArtsUserAttachments(e Engine, userID int64) ([]*AttachmentUsername, error) {
 	attachments := make([]*AttachmentUsername, 0, 10)
 	if err := e.Table("attachment").Join("LEFT", "`user`", "attachment.uploader_id "+
-		"= `user`.id").Where("type = ? and (uploader_id= ? or is_private = ?)", TypeCloudBrainTwo, userID, false).Find(&attachments); err != nil {
+		"= `user`.id").Where("attachment.type = ? and (uploader_id= ? or is_private = ?)", TypeCloudBrainTwo, userID, false).Find(&attachments); err != nil {
 		return nil, err
 	}
 	return attachments, nil

models/repo.go

@@ -1069,7 +1069,8 @@ func CreateRepository(ctx DBContext, doer, u *User, repo *Repository) (err error
 		return err
 	}
 
-	_, err = blockchain.NewRepo(string(repo.ID), u.PublicKey, repo.Name)
+	strRepoID := strconv.FormatInt(repo.ID, 10)
+	_, err = blockchain.NewRepo(strRepoID, u.PublicKey, repo.Name)
 	if err != nil {
 		log.Error("newRepo failed:", err.Error())
 	}

modules/auth/modelarts.go

@@ -7,10 +7,7 @@ import (
 
 type CreateModelArtsForm struct {
 	JobName    string `form:"job_name" binding:"Required"`
-	Image      string `form:"image" binding:"Required"`
-	Command    string `form:"command" binding:"Required"`
 	Attachment string `form:"attachment" binding:"Required"`
-	JobType    string `form:"job_type" binding:"Required"`
 }
 
 func (f *CreateModelArtsForm) Validate(ctx *macaron.Context, errs binding.Errors) binding.Errors {

modules/modelarts/modelarts.go

@@ -17,7 +17,10 @@ const (
 
 	subTaskName = "task1"
 
-	DataSetMountPath   = "/home/ma-user/work"
+	DataSetMountPath = "/home/ma-user/work"
+	NotebookEnv = "Python3"
+	NotebookType = "Ascend"
+	FlavorInfo = "Ascend: 1*Ascend 910 CPU: 24 核 96GiB （modelarts.kat1.xlarge）"
 )
 
 func GenerateTask(ctx *context.Context, jobName, uuid string) error {

modules/modelarts/resty.go

@@ -35,7 +35,10 @@ func checkSetting() {
 		return
 	}
 
-	getToken()
+	err := getToken()
+	if err != nil {
+		log.Error("getToken falied:", err.Error())
+	}
 }
 
 func getToken() error {

options/locale/locale_zh-CN.ini

@@ -2440,6 +2440,7 @@ file_status=文件处理状态：
 file_init_status=等待上传
 waitting_uploading=请等待文件传输完成
 md5_computing=计算MD5
+obs-connecting=obs连接中
 loading_file=加载文件
 uploading=正在上传
 upload_complete=上传完成

package-lock.json

@@ -1954,6 +1954,28 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-polyfill/download/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1611040749668&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -2143,6 +2165,11 @@
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
+    "blueimp-md5": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npm.taobao.org/blueimp-md5/download/blueimp-md5-2.18.0.tgz",
+      "integrity": "sha1-EVK+EzXwxrORHtnjbbVPPmrFKTU="
+    },
     "bn.js": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.1.tgz",
@@ -3419,8 +3446,7 @@
     "date-format": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/date-format/download/date-format-3.0.0.tgz",
-      "integrity": "sha1-64eANlx9KxURB4+0keZHl4DzrZU=",
-      "dev": true
+      "integrity": "sha1-64eANlx9KxURB4+0keZHl4DzrZU="
     },
     "dateformat": {
       "version": "2.2.0",
@@ -4033,11 +4059,33 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
+    "esdk-obs-browserjs": {
+      "version": "3.20.7",
+      "resolved": "https://registry.npm.taobao.org/esdk-obs-browserjs/download/esdk-obs-browserjs-3.20.7.tgz",
+      "integrity": "sha1-vhziRlKEhW3PgZPl0DyX68bJI0s=",
+      "requires": {
+        "axios": "^0.19.0",
+        "babel-polyfill": "^6.26.0",
+        "blueimp-md5": "^2.10.0",
+        "js-base64": "^2.3.2",
+        "jssha": "^2.3.1",
+        "urijs": "^1.19.1"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.19.2",
+          "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz?cache=0&sync_timestamp=1608609215811&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.19.2.tgz",
+          "integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=",
+          "requires": {
+            "follow-redirects": "1.5.10"
+          }
+        }
+      }
+    },
     "esdk-obs-nodejs": {
       "version": "3.20.11",
       "resolved": "https://registry.npm.taobao.org/esdk-obs-nodejs/download/esdk-obs-nodejs-3.20.11.tgz?cache=0&sync_timestamp=1610351636380&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fesdk-obs-nodejs%2Fdownload%2Fesdk-obs-nodejs-3.20.11.tgz",
       "integrity": "sha1-/bMuzu3qoT+xLgmCcgg8yM6MIsE=",
-      "dev": true,
       "requires": {
         "log4js": "^6.3.0",
         "xml2js": "^0.4.23"
@@ -5218,8 +5266,7 @@
     "flatted": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
-      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
-      "dev": true
+      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
     },
     "flatten": {
       "version": "1.0.3",
@@ -5235,6 +5282,29 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1611606737937&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
+      "integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
+      "requires": {
+        "debug": "=3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz?cache=0&sync_timestamp=1607566533140&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.1.0.tgz",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&sync_timestamp=1607433842694&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "fomantic-ui": {
       "version": "2.8.4",
       "resolved": "https://registry.npmjs.org/fomantic-ui/-/fomantic-ui-2.8.4.tgz",
@@ -5376,7 +5446,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npm.taobao.org/fs-extra/download/fs-extra-8.1.0.tgz?cache=0&sync_timestamp=1611075469998&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffs-extra%2Fdownload%2Ffs-extra-8.1.0.tgz",
       "integrity": "sha1-SdQ8RaiM2Wd2aMt74bRu/bjS4cA=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^4.0.0",
@@ -7720,7 +7789,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-4.0.0.tgz?cache=0&sync_timestamp=1604161797011&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -7737,6 +7805,11 @@
         "verror": "1.10.0"
       }
     },
+    "jssha": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npm.taobao.org/jssha/download/jssha-2.4.2.tgz",
+      "integrity": "sha1-2VCwlWNJKL1rK9odQtqaOnYtZek="
+    },
     "just-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.0.0.tgz",
@@ -8213,7 +8286,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npm.taobao.org/log4js/download/log4js-6.3.0.tgz",
       "integrity": "sha1-EN+vu0NDUaPjAnegC5h5RG9xW8s=",
-      "dev": true,
       "requires": {
         "date-format": "^3.0.0",
         "debug": "^4.1.1",
@@ -11862,8 +11934,7 @@
     "rfdc": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/rfdc/download/rfdc-1.2.0.tgz?cache=0&sync_timestamp=1610744108114&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frfdc%2Fdownload%2Frfdc-1.2.0.tgz",
-      "integrity": "sha1-npiUJY9I8oS0PDFDxoBwpPNzuUk=",
-      "dev": true
+      "integrity": "sha1-npiUJY9I8oS0PDFDxoBwpPNzuUk="
     },
     "rgb-regex": {
       "version": "1.0.1",
@@ -12476,7 +12547,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npm.taobao.org/streamroller/download/streamroller-2.2.4.tgz",
       "integrity": "sha1-wZjO1C25QIamGTYIGHzoCl8rDlM=",
-      "dev": true,
       "requires": {
         "date-format": "^2.1.0",
         "debug": "^4.1.1",
@@ -12486,8 +12556,7 @@
         "date-format": {
           "version": "2.1.0",
           "resolved": "https://registry.npm.taobao.org/date-format/download/date-format-2.1.0.tgz",
-          "integrity": "sha1-MdW16iEc9f12TNOLr50DPffhJc8=",
-          "dev": true
+          "integrity": "sha1-MdW16iEc9f12TNOLr50DPffhJc8="
         }
       }
     },
@@ -14049,8 +14118,7 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-0.1.2.tgz?cache=0&sync_timestamp=1603179967633&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-0.1.2.tgz",
-      "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=",
-      "dev": true
+      "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY="
     },
     "unquote": {
       "version": "1.1.1",
@@ -14122,6 +14190,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "urijs": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npm.taobao.org/urijs/download/urijs-1.19.5.tgz",
+      "integrity": "sha1-EZaDq0svsL1jfl6m3ZEXvKxo0+Q="
+    },
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
@@ -15108,7 +15181,6 @@
       "version": "0.4.23",
       "resolved": "https://registry.npm.taobao.org/xml2js/download/xml2js-0.4.23.tgz?cache=0&sync_timestamp=1599054229598&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fxml2js%2Fdownload%2Fxml2js-0.4.23.tgz",
       "integrity": "sha1-oMaVFnUkIesqx1juTUzPWIQ+rGY=",
-      "dev": true,
       "requires": {
         "sax": ">=0.6.0",
         "xmlbuilder": "~11.0.0"
@@ -15117,8 +15189,7 @@
     "xmlbuilder": {
       "version": "11.0.1",
       "resolved": "https://registry.npm.taobao.org/xmlbuilder/download/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha1-vpuuHIoEbnazESdyY0fQrXACvrM=",
-      "dev": true
+      "integrity": "sha1-vpuuHIoEbnazESdyY0fQrXACvrM="
     },
     "xtend": {
       "version": "4.0.2",

package.json

@@ -19,6 +19,8 @@
     "cssnano": "4.1.10",
     "domino": "2.1.5",
     "dropzone": "5.7.2",
+    "esdk-obs-browserjs": "3.20.7",
+    "esdk-obs-nodejs": "3.20.11",
     "fast-glob": "3.2.2",
     "file-loader": "6.0.0",
     "fomantic-ui": "2.8.4",
@@ -55,7 +57,6 @@
     "worker-loader": "2.0.0"
   },
   "devDependencies": {
-    "esdk-obs-nodejs": "3.20.11",
     "eslint": "6.8.0",
     "eslint-config-airbnb-base": "14.1.0",
     "eslint-plugin-import": "2.20.2",

routers/repo/modelarts.go

@@ -82,20 +82,26 @@ func ModelArtsNew(ctx *context.Context) {
 
 	ctx.Data["attachments"] = attachs
 	ctx.Data["dataset_path"] = modelarts.DataSetMountPath
+	ctx.Data["env"] = modelarts.NotebookEnv
+	ctx.Data["notebook_type"] = modelarts.NotebookType
+	ctx.Data["flavor"] = modelarts.FlavorInfo
 	ctx.HTML(200, tplModelArtsNew)
 }
 
-func ModelArtsCreate(ctx *context.Context, form auth.CreateCloudBrainForm) {
+func ModelArtsCreate(ctx *context.Context, form auth.CreateModelArtsForm) {
 	ctx.Data["PageIsCloudBrain"] = true
 	jobName := form.JobName
 	uuid := form.Attachment
 	//repo := ctx.Repo.Repository
 
+	log.Info(uuid)
+
 	err := modelarts.GenerateTask(ctx, jobName, uuid)
 	if err != nil {
 		ctx.RenderWithErr(err.Error(), tplModelArtsNew, &form)
 		return
 	}
+
 	ctx.Redirect(setting.AppSubURL + ctx.Repo.RepoLink + "/modelarts")
 }
 

templates/repo/datasets/index.tmpl

@@ -97,6 +97,7 @@
               data-file-init-status='{{.i18n.Tr "dropzone.file_init_status"}}'
               data-waitting-uploading='{{.i18n.Tr "dropzone.waitting_uploading"}}'
               data-md5-computing='{{.i18n.Tr "dropzone.md5_computing"}}'
+              data-obs-connecting='{{.i18n.Tr "dropzone.obs-connecting"}}'
               data-loading-file='{{.i18n.Tr "dropzone.loading_file"}}'
               data-upload-complete='{{.i18n.Tr "dropzone.upload_complete"}}'
               data-uploading='{{.i18n.Tr "dropzone.uploading"}}'

templates/repo/header.tmpl

@@ -220,7 +220,7 @@
 			if(checked_radio=='0'){
 				window.location.href = repolink+'/cloudbrain'
 			}else if(checked_radio=='1'){
-				window.location.href = repolink+'/blockchain'
+				window.location.href = repolink+'/modelarts'
 			}else{
 
 				return;

templates/repo/modelarts/index.tmpl

@@ -0,0 +1,492 @@
+<!-- 头部导航栏 -->
+{{template "base/head" .}}
+
+<style>
+    #deletemodel {
+        width: 100%;
+        height: 100%;
+    }
+    /* 弹窗 */
+
+    #mask {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        filter: alpha(opacity=60);
+        background-color: #777;
+        z-index: 1000;
+        display: none;
+        opacity: 0.8;
+        -moz-opacity: 0.5;
+        padding-top: 100px;
+        color: #000000
+    }
+
+    #loadingPage {
+        margin: 200px auto;
+        width: 50px;
+        height: 40px;
+        text-align: center;
+        font-size: 10px;
+        display: block;
+    }
+
+    #loadingPage>div {
+        background-color: green;
+        height: 100%;
+        width: 6px;
+        display: inline-block;
+        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+        animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    }
+
+    #loadingPage .rect2 {
+        -webkit-animation-delay: -1.1s;
+        animation-delay: -1.1s;
+    }
+
+    #loadingPage .rect3 {
+        -webkit-animation-delay: -1.0s;
+        animation-delay: -1.0s;
+    }
+
+    #loadingPage .rect4 {
+        -webkit-animation-delay: -0.9s;
+        animation-delay: -0.9s;
+    }
+
+    #loadingPage .rect5 {
+        -webkit-animation-delay: -0.8s;
+        animation-delay: -0.8s;
+    }
+
+    @-webkit-keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            -webkit-transform: scaleY(0.4)
+        }
+        20% {
+            -webkit-transform: scaleY(1.0)
+        }
+    }
+
+    @keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            transform: scaleY(0.4);
+            -webkit-transform: scaleY(0.4);
+        }
+        20% {
+            transform: scaleY(1.0);
+            -webkit-transform: scaleY(1.0);
+        }
+    }
+    /* 消息框 */
+
+    .alert {
+        display: none;
+        position: fixed;
+        width: 100%;
+        z-index: 1001;
+        padding: 15px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .alert-success {
+        color: #3c763d;
+        background-color: #dff0d8;
+        border-color: #d6e9c6;
+    }
+
+    .alert-info {
+        color: #31708f;
+        background-color: #d9edf7;
+        border-color: #bce8f1;
+    }
+
+    .alert-warning {
+        color: #8a6d3b;
+        background-color: #fcf8e3;
+        border-color: #faebcc;
+    }
+
+    .alert-danger {
+        color: #a94442;
+        background-color: #f2dede;
+        border-color: #ebccd1;
+    }
+
+    .pusher {
+        width: calc(100% - 260px);
+        box-sizing: border-box;
+    }
+    /* 弹窗 (background)  */
+
+    #imageModal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+    /* 弹窗内容 */
+
+    .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 30%;
+    }
+    /* 关闭按钮 */
+
+    .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+    }
+
+    .close:hover,
+    .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .dis {
+        margin-bottom: 20px;
+    }
+
+    .disabled {
+        cursor: pointer;
+        pointer-events: none;
+    }
+</style>
+
+<!-- 弹窗 -->
+<div id="mask">
+    <div id="loadingPage">
+        <div class="rect1"></div>
+        <div class="rect2"></div>
+        <div class="rect3"></div>
+        <div class="rect4"></div>
+        <div class="rect5"></div>
+    </div>
+</div>
+
+<!-- 提示框 -->
+<div class="alert"></div>
+
+<div class="repository release dataset-list view">
+    {{template "repo/header" .}}
+    <!-- 列表容器 -->
+    <div class="ui container">
+
+        <!-- 中间云脑和新建任务按钮 -->
+        <div class="ui three column stack able grid">
+            <div class="column">
+                <h2>{{.i18n.Tr "repo.cloudbrain2"}}</h2>
+            </div>
+
+            <div class="column">
+            </div>
+
+            <div class="column right aligned">
+                {{if .Permission.CanWrite $.UnitTypeCloudBrain}}
+                <a class="ui green button" href="{{.RepoLink}}/modelarts/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}}
+            </div>
+        </div>
+
+        <!-- 中间分割线 -->
+        <div class="ui divider"></div>
+
+        <!-- 中下列表展示区 -->
+        <div class="ui grid">
+            <div class="row">
+                <div class="ui sixteen wide column">
+
+                    <!-- 排序区 -->
+                    <div class="ui sixteen wide column">
+                        <div class="ui two column stackable grid">
+                            <div class="column">
+                            </div>
+                            <div class="column right aligned">
+                                <div class="ui right dropdown type jump item">
+                                    <span class="text">
+                                        {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 任务展示 -->
+                    <div class="dataset list">
+                        {{range .Tasks}}
+                        <div class="ui grid stackable item">
+                            <div class="row">
+
+                                <!-- 任务名 -->
+                                <div class="four wide column">
+                                    <a class="title" href="{{$.Link}}/{{.JobID}}">
+                                        <span class="fitted">{{svg "octicon-tasklist" 16}}</span>
+                                        <span class="fitted">{{.JobName}}</span>
+                                    </a>
+                                </div>
+
+                                <!--任务状态 -->
+                                <div class="three wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
+                                    {{.Status}}
+                                </div>
+
+                                <!-- 任务创建时间 -->
+                                <div class="three wide column">
+                                    <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
+                                </div>
+
+                                <!-- 查看 -->
+                                <div class="one wide column">
+                                    <span class="ui text  clipboard">
+                                        <a class="title" href="{{$.Link}}/{{.JobID}}">
+                                            <span class="fitted">查看</span>
+                                    </a>
+                                    </span>
+                                </div>
+
+                                <!-- 评分 -->
+                                <div class="one wide column">
+                                    <div class="ui text center clipboard">
+                                        <a class="title" onclick="stop(this)" href="{{if and (ne .Status "WAITING") (eq .JobType "BENCHMARK")}}{{$.Link}}/{{.JobID}}/benchmark{{else}}javascript:void(0);{{end}}" style="{{if and (ne .Status "WAITING") (eq .JobType "BENCHMARK")}}{{else}}color:#CCCCCC{{end}}">
+                                            <span class="fitted">评分</span>
+                                    </a>
+                                    </div>
+                                </div>
+
+                                <!-- 删除镜像 -->
+                                <div class="one wide column">
+                                    <div class="ui text center clipboard">
+                                        <form id="delForm-{{.JobID}}" action="{{if ne .Status "STOPPED"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
+                                            {{$.CsrfTokenHtml}}
+                                            <a class="fitted" onclick="assertDelete(this)" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a>
+                                        </form>
+                                    </div>
+                                </div>
+
+                                <!-- 调试 -->
+                                <div class="one wide column">
+                                    <div class="ui text center clipboard">
+                                        <a class="title" onclick="stop(this)" href="{{if not .CanDebug}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/debug{{end}}" style="{{if not .CanDebug}}color:#CCCCCC{{end}}">
+                                            <span class="fitted">调试</span>
+                                    </a>
+                                    </div>
+                                </div>
+
+                                <!-- 停止 -->
+                                <div class="one wide column">
+                                    <div class="ui text center clipboard">
+                                        <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
+                                            {{$.CsrfTokenHtml}}
+                                            <a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
+                                        </form>
+                                    </div>
+                                </div>
+
+                                <!-- 接收结果 -->
+                                <iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
+                                <a class="imageBtn" style="{{if not .CanDebug}}color:#CCCCCC;cursor:pointer;pointer-events:none;{{end}}; font-size:16px; font-weight:bold" value="{{.CanDebug}}">提交镜像</a>
+
+                                <!-- 镜像列表弹窗 -->
+                                <div id="imageModal" class="modal" style="display: none;">
+                                    <div class="modal-content">
+                                        <span class="close">&times;</span>
+
+                                        <!-- 表格 -->
+                                        <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post" target="iframeContent">
+                                            {{$.CsrfTokenHtml}}
+                                            <p>提交任务镜像</p>
+                                            <div class="ui divider"></div>
+
+                                            <div class="inline required field dis">
+                                                <label>镜像标签：</label>
+                                                <input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%">
+                                            </div>
+
+                                            <div class="inline required field" style="position:relative;height:180px;">
+                                                <div style="height:20px;width:75px;">
+                                                    <label>镜像描述：</label>
+                                                </div>
+                                                <div style="position:absolute;left:75px;top:0;width:75%">
+                                                    <textarea name="description" rows="10" style="width:100%"></textarea>
+                                                </div>
+                                            </div>
+
+                                            <div class="ui divider"></div>
+
+                                            <div class="inline field">
+                                                <label></label>
+                                                <button class="ui green button" onclick="showmask()">
+                                                    {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
+                                                </button>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                        {{end}} {{template "base/paginate" .}}
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</div>
+</div>
+
+</div>
+
+<!-- 确认模态框 -->
+<div id="deletemodel">
+    <div class="ui basic modal">
+        <div class="ui icon header">
+            <i class="trash icon"></i> 删除任务
+        </div>
+
+        <div class="content">
+            <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
+        </div>
+        <div class="actions">
+            <div class="ui red basic inverted cancel button">
+                <i class="remove icon"></i> 取消操作
+            </div>
+            <div class="ui green basic inverted ok button">
+                <i class="checkmark icon"></i> 确定操作
+            </div>
+        </div>
+    </div>
+</div>
+
+</div>
+{{template "base/footer" .}}
+
+<script>
+    // 调试和评分新开窗口
+    function stop(obj) {
+        if (obj.style.color != "rgb(204, 204, 204)") {
+            obj.target = '_blank'
+        } else {
+            return
+        }
+    }
+
+    // 删除时用户确认
+    function assertDelete(obj) {
+        if (obj.style.color == "rgb(204, 204, 204)") {
+            return
+        } else {
+            var delId = obj.parentNode.id
+            flag = 1;
+            $('.ui.basic.modal')
+                .modal({
+                    onDeny: function() {
+                        flag = false
+                    },
+                    onApprove: function() {
+                        document.getElementById(delId).submit()
+                        flag = true
+                    },
+                    onHidden: function() {
+                        if (flag == false) {
+                            $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
+                        }
+                    }
+                })
+                .modal('show')
+        }
+    }
+
+    // 加载任务状态
+    $(document).ready(function() {
+        $(".job-status").each((index, job) => {
+            const jobID = job.dataset.jobid;
+            const repoPath = job.dataset.repopath;
+            if (job.textContent.trim() == 'STOPPED') {
+                return
+            }
+
+            $.get(`/api/v1/repos/${repoPath}/cloudbrain/${jobID}`, (data) => {
+                const jobID = data.JobID
+                const status = data.JobStatus
+                $('#' + jobID).text(status)
+                    // console.log(data)
+            }).fail(function(err) {
+                console.log(err);
+            });
+        });
+    });
+
+    // 获取弹窗
+    var modal = document.getElementById('imageModal');
+
+    // 打开弹窗的按钮对象
+    var btns = document.getElementsByClassName("imageBtn");
+
+    // 获取 <span> 元素，用于关闭弹窗
+    var spans = document.getElementsByClassName('close');
+
+    // 点击按钮打开弹窗
+    for (i = 0; i < btns.length; i++) {
+        btns[i].onclick = function() {
+            modal.style.display = "block";
+        }
+    }
+
+    // 点击 <span> (x), 关闭弹窗
+    for (i = 0; i < spans.length; i++) {
+        spans[i].onclick = function() {
+            modal.style.display = "none";
+        }
+    }
+
+    // 在用户点击其他地方时，关闭弹窗
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+
+    // 显示弹窗，弹出相应的信息
+    function showmask() {
+        $('#imageModal').css('display', 'none')
+        $('#mask').css('display', 'block')
+
+        $("iframe[name=iframeContent]").on("load", function() {　　
+            var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;　
+            var json1 = JSON.parse(responseText)
+            $('#mask').css('display', 'none')
+            parent.location.href
+
+            if (json1.result_code === "0") {
+                $('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
+            } else {
+                $('.alert').html(json1.error_msg).removeClass('alert-success').addClass('alert-danger').show().delay(5000).fadeOut();
+            }
+        })
+    }
+</script>

templates/repo/modelarts/new.tmpl

@@ -0,0 +1,181 @@
+{{template "base/head" .}}
+<style>
+    /* 遮罩层css效果图  */
+    
+    #mask {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        filter: alpha(opacity=60);
+        background-color: #777;
+        z-index: 1000;
+        display: none;
+        opacity: 0.8;
+        -moz-opacity: 0.5;
+        padding-top: 100px;
+        color: #000000
+    }
+    /* 加载圈css效果图 */
+    
+    #loadingPage {
+        margin: 200px auto;
+        width: 50px;
+        height: 40px;
+        text-align: center;
+        font-size: 10px;
+        display: block;
+    }
+    
+    #loadingPage>div {
+        background-color: green;
+        height: 100%;
+        width: 6px;
+        display: inline-block;
+        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+        animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    }
+    
+    #loadingPage .rect2 {
+        -webkit-animation-delay: -1.1s;
+        animation-delay: -1.1s;
+    }
+    
+    #loadingPage .rect3 {
+        -webkit-animation-delay: -1.0s;
+        animation-delay: -1.0s;
+    }
+    
+    #loadingPage .rect4 {
+        -webkit-animation-delay: -0.9s;
+        animation-delay: -0.9s;
+    }
+    
+    #loadingPage .rect5 {
+        -webkit-animation-delay: -0.8s;
+        animation-delay: -0.8s;
+    }
+    
+    @-webkit-keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            -webkit-transform: scaleY(0.4)
+        }
+        20% {
+            -webkit-transform: scaleY(1.0)
+        }
+    }
+    
+    @keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            transform: scaleY(0.4);
+            -webkit-transform: scaleY(0.4);
+        }
+        20% {
+            transform: scaleY(1.0);
+            -webkit-transform: scaleY(1.0);
+        }
+    }
+    
+    .inline.required.field.cloudbrain_benchmark {
+        display: none;
+    }
+</style>
+
+<div id="mask">
+    <div id="loadingPage">
+        <div class="rect1"></div>
+        <div class="rect2"></div>
+        <div class="rect3"></div>
+        <div class="rect4"></div>
+        <div class="rect5"></div>
+    </div>
+</div>
+<div class="repository">
+    {{template "repo/header" .}}
+    <div class="repository new repo ui middle very relaxed page grid">
+        <div class="column">
+            {{template "base/alert" .}}
+            <form class="ui form" action="{{.Link}}" method="post">
+                {{.CsrfTokenHtml}}
+                <h3 class="ui top attached header">
+                    {{.i18n.Tr "repo.cloudbrain.new"}}
+                </h3>
+                <div class="ui attached segment">
+                    <!-- <br> -->
+                    <div class="inline required field">
+                        <label>任务名称</label>
+                        <input name="job_name" id="cloudbrain_job_name" placeholder="任务名称" value="{{.job_name}}" tabindex="3" autofocus required maxlength="255">
+                    </div>
+
+                    <div class="inline required field">
+                        <label>数据集</label>
+                        <input name="attachment" id="cloudbrain_attachment" value="019fd24e-4ef7-41cc-9f85-4a7b8504d958" tabindex="3" autofocus required maxlength="255" readonly="readonly">
+                        <!--<select id="cloudbrain_dataset" class="ui search dropdown" placeholder="选择数据集" style='width:385px' name="attachment">
+                            {{range .attachments}}
+                                <option name="attachment" value="{{.UUID}}">{{.Attachment.Name}}</option>
+
+                            {{end}}
+                        </select>-->
+                    </div>
+
+                    <div class="inline required field">
+                        <label>工作环境</label>
+                        <input name="de" id="cloudbrain_de" value="{{.env}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
+                    </div>
+                    <div class="inline required field">
+                        <label>类型</label>
+                        <input name="job_type" id="cloudbrain_job_type" value="{{.notebook_type}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
+                    </div>
+                    <div class="inline required field">
+                        <label>规格</label>
+                        <input name="flavor" id="cloudbrain_flavor" value="{{.flavor}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
+                    </div>
+                    <div class="inline required field">
+                        <label>数据集存放路径</label>
+                        <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
+                    </div>
+                    <div class="inline field">
+                        <label></label>
+                        <button class="ui green button" onclick="showmask()">
+              {{.i18n.Tr "repo.cloudbrain.new"}}
+            </button>
+                        <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{{template "base/footer" .}}
+
+<script>
+    // 点击按钮后遮罩层显示
+    function showmask() {
+        document.getElementById("mask").style.display = "block"
+    }
+
+    // 页面加载完毕后遮罩层隐藏
+    document.onreadystatechange = function() {
+        if (document.readyState === "complete") {
+            document.getElementById("mask").style.display = "none"
+        }
+    }
+
+    $('select.dropdown')
+        .dropdown();
+
+    $(function() {
+        $("#cloudbrain_job_type").change(function() {
+            if ($(this).val() == 'BENCHMARK') {
+                $(".cloudbrain_benchmark").show();
+            } else {
+                $(".cloudbrain_benchmark").hide();
+            }
+        })
+    })
+</script>

templates/repo/modelarts/show.tmpl

@@ -0,0 +1,104 @@
+{{template "base/head" .}}
+<div class="repository">
+{{template "repo/header" .}}
+  <div class="repository new repo ui middle very relaxed page grid">
+    <div class="column">
+  	    {{template "base/alert" .}}
+
+        <h4 class="ui header" id="vertical-segment">
+          <a href="javascript:window.history.back();"><i class="arrow left icon"></i>返回</a>
+        </h4>
+        <div>
+          <div class="ui yellow segment">
+            {{with .task}}
+            <p>任务名称: {{.JobName}}</p>
+            {{end}}
+          </div>
+          <div class="ui green segment">
+            <p>任务结果:</p>
+            {{with .taskRes}}
+              {{range .TaskStatuses}}
+            <table class="ui celled striped table">
+              <tbody>
+                <tr>
+                  <td class="four wide"> 状态 </td>
+                  <td> {{.State}} </td>
+                </tr>
+                <tr>
+                  <td> 开始时间 </td>
+                  <td>{{.StartTime}}</td>
+                </tr>
+                <tr>
+                  <td> 结束时间 </td>
+                  <td>{{.FinishedTime}}</td>
+                </tr>
+                <tr>
+                  <td> ExitCode </td>
+                  <td>{{.ExitCode}}</td>
+                </tr>
+                <tr>
+                  <td> 退出信息 </td>
+                  <td>{{.ExitDiagnostics| nl2br}}</td>
+                </tr>
+              </tbody>
+            </table>
+                {{end}}
+            {{end}}
+          </div>
+          <div class="ui blue segment">
+          {{with .result}}
+            <table class="ui celled striped table">
+              <thead>
+              <tr> <th colspan="2"> 硬件信息 </th> </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="four wide"> CPU </td>
+                  <td>{{.Resource.CPU}}</td>
+                </tr>
+                <tr>
+                  <td> Memory </td>
+                  <td>{{.Resource.Memory}}</td>
+                </tr>
+                <tr>
+                  <td> NvidiaComGpu </td>
+                  <td>{{.Resource.NvidiaComGpu}}</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <table class="ui celled striped table">
+              <thead>
+              <tr> <th colspan="2"> 调试信息 </th> </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="four wide"> 状态 </td>
+                  <td> {{.Platform}} </td>
+                </tr>
+                <tr>
+                  <td> 开始时间 </td>
+                  <td>{{.JobStatus.StartTime}}</td>
+                </tr>
+                <tr>
+                  <td> 结束时间 </td>
+                  <td>{{.JobStatus.EndTime}}</td>
+                </tr>
+                <tr>
+                  <td> ExitCode </td>
+                  <td>{{.JobStatus.AppExitCode}}</td>
+                </tr>
+                <tr>
+                  <td> 退出信息 </td>
+                  <td>{{.JobStatus.AppExitDiagnostics | nl2br}}</td>
+                </tr>
+              </tbody>
+            </table>
+            {{end}}
+          </div>
+        </div>
+
+    </div>
+  </div>
+</div>
+{{template "base/footer" .}}

web_src/js/components/MinioUploader.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="dropzone-wrapper dataset-files">
+    <div
+      id="dataset"
+      class="dropzone"
+    />
+
+    <p class="upload-info">
+      {{ file_status_text }}
+      <span class="success">{{ status }}</span>
+    </p>
+  </div> 
+</template>
+
+<script>
+/* eslint-disable eqeqeq */
+// import Dropzone from 'dropzone/dist/dropzone.js';
+// import 'dropzone/dist/dropzone.css'
+import createDropzone from '../features/dropzone.js';
+import ObsClient from 'esdk-obs-browserjs';
+
+const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+
+export default {
+  data() {
+    return {
+      dropzoneUploader: null,
+      maxFiles: 1,
+      maxFilesize: 1 * 1024 * 1024 * 1024 * 1024,
+      acceptedFiles: '*/*',
+      progress: 0,
+      status: '',
+      dropzoneParams: {},
+      file_status_text: ''
+    };
+  },
+
+  async mounted() {
+    this.dropzoneParams = $('div#minioUploader-params');
+    this.file_status_text = this.dropzoneParams.data('file-status');
+    this.status = this.dropzoneParams.data('file-init-status');
+
+    let previewTemplate = '';
+    previewTemplate += '<div class="dz-preview dz-file-preview">\n ';
+    previewTemplate += '    <div class="dz-details">\n ';
+    previewTemplate += '        <div class="dz-filename">';
+    previewTemplate +=
+      '            <span data-dz-name data-dz-thumbnail></span>';
+    previewTemplate += '        </div>\n    ';
+    previewTemplate += '        <div class="dz-size" data-dz-size></div>\n  ';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-progress ui active progress">';
+    previewTemplate +=
+      '        <div class="dz-upload bar" data-dz-uploadprogress><div class="progress"></div></div>\n  ';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-success-mark">';
+    previewTemplate += '        <span>上传成功</span>';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-error-mark">';
+    previewTemplate += '        <span>上传失败</span>';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-error-message">';
+    previewTemplate += '        <span data-dz-errormessage></span>';
+    previewTemplate += '    </div>\n';
+    previewTemplate += '</div>';
+
+    const $dropzone = $('div#dataset');
+    console.log('createDropzone');
+
+    const dropzoneUploader = await createDropzone($dropzone[0], {
+      url: '/todouploader',
+      maxFiles: this.maxFiles,
+      maxFilesize: this.maxFileSize,
+      timeout: 0,
+      autoQueue: false,
+      dictDefaultMessage: this.dropzoneParams.data('default-message'),
+      dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'),
+      dictFileTooBig: this.dropzoneParams.data('file-too-big'),
+      dictRemoveFile: this.dropzoneParams.data('remove-file'),
+      previewTemplate,
+    });
+
+    // 文件发送前调用
+    // dropzoneUploader.on('sending', (file, xhr, formData) => {
+    //   console.log(xhr)
+    //   console.log(formData)
+    // });
+
+    // 文件复制后触发
+    dropzoneUploader.on('addedfile', (file) => {
+      if(file.status == 'added'){
+        this.onFileAdded(file)
+      } 
+    });
+
+    dropzoneUploader.on('success', (file, res) => {
+      this.emitDropzoneSuccess(file)
+    });
+
+    // dropzoneUploader.on('totaluploadprogress', function(file, progress){
+    //   this.updateProgress(file, progress)
+    // });
+
+    dropzoneUploader.on('maxfilesexceeded', function (file) {
+      if (this.files[0].status !== 'success') {
+        alert(this.dropzoneParams.data('waitting-uploading'));
+        this.removeFile(file);
+        return;
+      }
+      this.removeAllFiles();
+      this.addFile(file);
+    });
+
+    this.dropzoneUploader = dropzoneUploader;
+  },
+
+  methods: {
+    resetStatus() {
+      this.progress = 0;
+      this.status = '';
+    },
+    updateProgress(file, progress) {
+      file.previewTemplate.querySelector(
+        '.dz-upload'
+      ).style.width = `${progress}%`;
+    },
+    emitDropzoneSuccess(file) {
+      file.status = 'success';
+      this.dropzoneUploader.emit('success', file);
+      this.dropzoneUploader.emit('complete', file);
+      // this.finishUpload(file)
+    },
+    emitDropzoneFailed(file) {
+      this.status = this.dropzoneParams.data('falied');
+      file.status = 'error';
+      this.dropzoneUploader.emit('error', file);
+      // this.dropzoneUploader.emit('complete', file);
+    },
+
+    onFileAdded(file) {
+      // file.datasetId = document
+      //   .getElementById('datasetId')
+      //   .getAttribute('datasetId');
+      this.resetStatus();
+      this.status = this.dropzoneParams.data('obs-connecting');
+      console.log(this.dropzoneParams)
+      console.log(this.status)
+      this.do_uploader(file) 
+    },
+
+    get_result(){
+      var res
+      $.ajax({
+        url: '/attachments/get_obs_key',
+        type: 'GET',
+        async: false,
+        success: function(result){
+          res = result
+        }
+      });
+      return res
+    },  
+
+    getObsClient(){
+      return new ObsClient({
+        access_key_id: 'FDP3LRMHLB9S77VWEHE3',       
+        secret_access_key: 'LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN',       
+        server : 'https://obs.cn-south-222.ai.pcl.cn'
+      });
+    },
+
+    do_uploader(file){
+      // 创建ObsClient实例
+      let obsClient = this.getObsClient()
+      var cp;
+      var hook;
+
+      console.log(obsClient)
+      obsClient.uploadFile({
+        Bucket : 'testopendata',
+        Key : this.get_result().key,
+        SourceFile : file,
+        PartSize : 64 * 1024 * 1024,
+        // ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
+        //   console.log(transferredAmount * 1.0 / totalSeconds / 1024);
+        //   console.log(transferredAmount * 100.0 / totalAmount);
+        //   if(hook && (transferredAmount / totalAmount) > 0.5){
+        //       // 暂停断点续传任务
+        //     hook.cancel();
+        //   }
+        // },
+        EventCallback : function(eventType, eventParam, eventResult){
+            // 处理事件响应
+          console.log("1", eventType)
+          console.log("2",eventParam)
+          console.log("3",eventResult)
+        },
+        // ResumeCallback : function(resumeHook, uploadCheckpoint){
+        //   // 获取取消断点续传上传任务控制参数
+        //   hook = resumeHook;
+        //   // 记录断点
+        //   cp = uploadCheckpoint;
+        // }
+      }, function(err, result){
+          
+          // 出现错误，再次调用断点续传接口，继续上传任务
+          if(err){
+            console.error('Error-->' + err);
+          //   obsClient.uploadFile({
+          //       UploadCheckpoint : cp,
+          //       ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
+          //           console.log(transferredAmount * 1.0 / totalSeconds / 1024);
+          //           console.log(transferredAmount * 100.0 / totalAmount);
+          // //       },
+          //       EventCallback : function(eventType, eventParam, eventResult){
+          //         // 处理事件响应
+          //         console.log(eventType)
+          //         console.log(eventParam)
+          //         console.log(eventResult)
+          //       },
+          //     }, function(err, result){
+          //       if(err){
+          //           console.error('Error-->' + err);
+          //       }else{
+          //           if(result.CommonMsg.Status < 300){
+          //             console.log('RequestId-->' + result.InterfaceResult.RequestId);
+          //             console.log('Bucket-->' + result.InterfaceResult.Bucket);
+          //             console.log('Key-->' + result.InterfaceResult.Key);
+          //             console.log('Location-->' + result.InterfaceResult.Location);
+          //           }else{
+          //             console.log('Code-->' + result.CommonMsg.Code);
+          //             console.log('Message-->' + result.CommonMsg.Message);
+          //           }
+          //     }
+          //   });
+          }else {
+              console.log('Status-->' + result.CommonMsg.Status);
+              if (result.CommonMsg.Status < 300 && result.InterfaceResult) {
+                      console.log('RequestId-->' + result.InterfaceResult.RequestId);
+              }
+          }
+      });
+    },
+
+
+    finishUpload(file) {
+      // $.ajax({
+      //   url: '/attachments/add',
+      //   type: 'POST',
+      //   data: {
+      //     'uuid': get_result().uuid,
+      //     'file_name': filepath.split('/')[-1],
+      //     'size': file.size,
+      //     'dataset_id': file.datasetId,
+      //     '_csrf': csrf,
+      //     'type': 1
+      //   },
+      //   async: false,
+      //   success: function (data) {
+      //     console.log(data)
+      //   }
+      // })
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    }
+
+  }
+};
+</script>
+
+<style>
+.dropzone-wrapper {
+  margin: 2em auto;
+}
+.ui .dropzone {
+  border: 2px dashed #0087f5;
+  box-shadow: none !important;
+  padding: 0;
+  min-height: 5rem;
+  border-radius: 4px;
+}
+.dataset .dataset-files #dataset .dz-preview.dz-file-preview,
+.dataset .dataset-files #dataset .dz-preview.dz-processing {
+  display: flex;
+  align-items: center;
+}
+.dataset .dataset-files #dataset .dz-preview {
+  border-bottom: 1px solid #dadce0;
+  min-height: 0;
+}
+</style>