add file

.github/workflows/gh-pages.yml

@@ -5,18 +5,26 @@ on:
     branches:
     - main
 
+env:
+  GITEA_MAIL: ${{ secrets.GITEA_MAIL }}
+  GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+
 jobs:
   build-deploy:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v4
       with:
-        node-version: 14
+        node-version: 16
         ref: main
         submodules: true
         fetch-depth: 0
-    - run: yarn install
+    - run: |
+           yarn install
+           rm -rf public
+           git clone https://${GITEA_TOKEN}@git.syui.ai/ai/card-public public
+           rm -rf public/.git
 
     - name: Build
       env: 
@@ -29,3 +37,5 @@ jobs:
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         publish_dir: ./dist
+        user_name: 'ai[bot]'
+        user_email: '138105980+yui-syui-ai[bot]@users.noreply.github.com'

.gitignore

@@ -1,4 +1,8 @@
-.DS_Store
 node_modules
 dist
-*.lock
+tt
+app.js
+yarn-error.log
+package-lock.json
+yarn.lock
+**DS_Store

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "public"]
+	path = public
+	url = git@git.syui.ai:ai/card-public

CNAME

@@ -1 +0,0 @@
-card.syui.ai

package.json

@@ -1,19 +1,22 @@
 {
-  "name": "atr-web",
+  "name": "card",
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.25.0",
+    "@google/model-viewer": "^3.4.0",
+    "@nuxtjs/proxy": "^2.1.0",
+    "axios": "^1.6.8",
     "core-js": "^3.6.4",
     "moment": "^2.29.4",
-    "superagent": "^8.0.9",
+    "three": "^0.162.0",
     "vue": "^2.6.11",
     "vue-loading-template": "^1.3.2",
+    "vue-meta": "^2.4.0",
     "vue-template-compiler": "^2.6.14"
   },
   "devDependencies": {

public/CNAME

@@ -1 +0,0 @@
-at.syui.ai

public/card/card.json

@@ -1,80 +0,0 @@
-[
-  {
-    "id": 0,
-    "h": "創造",
-    "src": "89",
-    "cid": "bafkreibh4nmdgyzvjvkhek2ultx4lsrrq2dnc7z2lqbua2ik47xo2zgkru"
-  },
-  {
-    "id": 1,
-    "h": "夢幻",
-    "src": "100",
-    "cid": "bafkreiajf5lblrojyo7vcqdhiqgbhd5eaj3u47mvvqf63kvexwfwphpx2y"
-  },
-  {
-    "id": 2,
-    "h": "光輝",
-    "src": "109",
-    "cid": "bafkreieywv4thvjrwbcf2dcol4svwmculf5qm2kvjtu2ywyyh56c7swi64"
-  },
-  {
-    "id": 3,
-    "h": "中性子",
-    "src": "88",
-    "cid": "bafkreieuphzhesuoqouszzwuv3iw7d5nz4eamlqc2csfv26d5vmcdg2qby"
-  },
-  {
-    "id": 4,
-    "h": "太陽",
-    "src": "59",
-    "cid": "bafkreifw7f44ldmi7bufs5rzwftjvgmsflekkvxazqns63venm7hqnql3q"
-  },
-  {
-    "id": 5,
-    "h": "夜空",
-    "src": "112",
-    "cid": "bafkreicuieuz6wjva7l7t2u5n46izxs7nku6tedlgtlgkabszjz5dn3yl4"
-  },
-  {
-    "id": 6,
-    "h": "白雪",
-    "src": "15",
-    "cid": "bafkreihl5ifvl3ougbfdjfdjwrhdjrncqm5opj65cteow5f2aj7p6nz42y"
-  },
-  {
-    "id": 7,
-    "h": "雷帝",
-    "src": "30",
-    "cid": "bafkreihylxc22kfcb3bereypl6tvqkiqtazod3tp7vbze7yxdqedwli6z4"
-  },
-  {
-    "id": 8,
-    "h": "超究",
-    "src": "108",
-    "cid": "bafkreieq4tdiq72tsbvqv5bnitd5sj5bbvtmee5off3k4nvl7za3plhj5m"
-  },
-  {
-    "id": 9,
-    "h": "剣技",
-    "src": "103",
-    "cid": "bafkreig2uzf5cyn5fty5ftumd6wyg7vf5wry37h4v4mmorkx5msvn3uqvu"
-  },
-  {
-    "id": 10,
-    "h": "破壊",
-    "src": "87",
-    "cid": "bafkreifcos5ur6y753jepmy4ttgylasvcyk5osguzlaojcnlrshl3q6k3a"
-  },
-  {
-    "id": 11,
-    "h": "地球",
-    "src": "78",
-    "cid": "bafkreigpxxkzz2oesnb2mnfe42nrgk57wnr73ssn5luriy3j25mij43uki"
-  },
-  {
-    "id": 12,
-    "h": "天ノ川",
-    "src": "115",
-    "cid": "bafkreiefcjjplklmo6wrc7pq23yaewg2zgjm7nsmjy5q7mut2dnxydomnm"
-  }
-]

public/card/t.zsh

@@ -1,21 +0,0 @@
-#!/bin/zsh
-
-d=${0:a:h}
-j=$d/card.json
-n=`cat $j|jq length`
-n=$((n - 1))
-for ((i=0;i<=$n;i++))
-do
-	t=`cat $j|jq ".[$i].cid"`
-	id=`cat $j|jq ".[$i].id"`
-	f=card_${id}.webp
-	if ls $f;then
-		cid=`atr img-upload $f|head -n 1`
-		echo $cid
-		if cat $j |jq ".[$i]|= .+ {\"cid\":\"$cid\"}";then
-			cat $j |jq ".[$i]|= .+ {\"cid\":\"$cid\"}" >! $j.back
-			mv $j.back $j
-			cat $j|jq ".[$i]"
-		fi
-	fi
-done

public/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html lang=""><head><title><%= htmlWebpackPlugin.options.title %></title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="app.css" rel="preload" as="style"><link href="app.js" rel="preload" as="script"><link href="chunk-vendors.js" rel="preload" as="script"><link href="app.css" rel="stylesheet"></head><body><div id="app"></div><script src="chunk-vendors.js"></script><script src="app.js"></script></body></html>

public/json/syui.syui.ai.json

@@ -1,20 +0,0 @@
-{
-  "did": "did:plc:schldsdljwxcdtslnbqaoifh",
-  "declaration": {
-    "actorType": "app.bsky.system.actorUser",
-    "cid": "bafyreid27zk7lbis4zw5fz4podbvbs4fc5ivwji3dmrwa6zggnj4bnd57u"
-  },
-  "handle": "syui.syui.ai",
-  "avatar": "https://at.syui.ai/image/1gNGwD6W74qb_Nuncr5H5i9UADEtdyds9myxRGnkGMw/rs:fill:1000:1000:1:0/plain/bafkreibxgpwttqvpsnn5yrvqkx47nwuzpzrkfyladqy2hbj3chedph3fni@jpeg",
-  "followsCount": 0,
-  "followersCount": 1,
-  "postsCount": 1,
-  "creator": "did:plc:schldsdljwxcdtslnbqaoifh",
-  "indexedAt": "2023-03-21T08:23:26.046Z",
-  "viewer": {
-    "muted": false
-  },
-  "myState": {
-    "muted": false
-  }
-}

readme.md

@@ -0,0 +1,9 @@
+# card
+
+- host : [card.syui.ai](https://card.syuiai)
+
+```sh
+$ nvm use 16
+$ yarn install
+$ yarn dev
+```

scpt/card_number_push.zsh

@@ -0,0 +1,16 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=https://syui.ai/img
+
+json=$dd/public/json/card.json
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+
+for ((i=0;i<=14;i++))
+do
+	sid=`cat $json|jq -r ".[$i].src"`
+	id=`cat $json|jq -r ".[$i].id"`
+	curl -sL $url/${sid}.png -o ~/ai/yui/content/img/${id}.png
+done

scpt/convert.zsh

@@ -0,0 +1,62 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=syui.ai/img
+
+case $OSTYPE in
+	darwin*)
+		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
+	linux*)
+		path_nvm_sh="";;
+esac
+
+dir=$dd/public/card
+static=$dd/static/img
+json=$dd/public/json/card.json
+mkdir -p $dir
+mkdir -p $static
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+bg=$static/card_bg.png
+br=$static/card_br.png
+
+cd $dir
+export NVM_DIR="$HOME/.nvm"
+[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
+nvm use 17
+nvm i squoosh-cli
+
+for ((i=0;i<=$n;i++))
+do
+	p=`cat $json|jq -r ".[$i].p"`
+	sid=`cat $json|jq -r ".[$i].src"`
+	s=$static/${sid}.png
+	id=`cat $json|jq -r ".[$i].id"`
+	o=$dir/card_$id.png
+	gif=$dir/card_$id.gif
+
+	if [ -f $o ];then
+		continue
+	fi
+
+	if [ ! -f $s ];then
+		curl -sL $url/yui_${sid}.png -o $s
+	fi
+
+	if [ ! -f $o ] && [ -n "`echo $s|grep ai_model`" ];then
+		model_card=$dir/${sid}.png
+		model_webp=$dir/${sid}.webp
+		cp -rf $model_card $o
+		squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' $o
+	fi
+
+	if [ ! -f $o ];then
+	#if [ ! -f $o ] && [ -z "`echo $s|grep ai_model`" ];then
+		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
+		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
+		squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' $o
+		rm $o.back
+	fi
+	
+done

scpt/convert_origin.zsh

@@ -0,0 +1,53 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=syui.ai/img
+
+case $OSTYPE in
+	darwin*)
+		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
+	linux*)
+		path_nvm_sh="";;
+esac
+
+dir=$dd/public/card
+static=$dd/static/img
+json=$dd/public/json/card.json
+mkdir -p $dir
+mkdir -p $static
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+bg=$static/card_bg_origin.png
+br=$static/card_br.png
+
+cd $dir
+export NVM_DIR="$HOME/.nvm"
+[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
+nvm use 17
+nvm i squoosh-cli
+
+for ((i=0;i<=$n;i++))
+do
+	p=`cat $json|jq -r ".[$i].p"`
+	sid=`cat $json|jq -r ".[$i].src"`
+	s=$static/${sid}.png
+	id=`cat $json|jq -r ".[$i].id"`
+	o=$dir/card_origin_${id}.png
+
+	if [ -f $o ];then
+		continue
+	fi
+
+	if [ ! -f $s ];then
+		curl -sL $url/yui_${sid}.png -o $s
+	fi
+
+	if [ ! -f $o ] && [ -z "`echo $s|grep ai_model`" ];then
+		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
+		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
+		squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' $o
+		rm $o.back
+	fi
+
+done

scpt/convert_origin2.zsh

@@ -0,0 +1,53 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=syui.ai/img
+
+case $OSTYPE in
+	darwin*)
+		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
+	linux*)
+		path_nvm_sh="";;
+esac
+
+dir=$dd/public/card
+static=$dd/static/img
+json=$dd/public/json/card.json
+mkdir -p $dir
+mkdir -p $static
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+bg=$static/card_bg_origin2.png
+br=$static/card_br.png
+
+cd $dir
+export NVM_DIR="$HOME/.nvm"
+[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
+nvm use 17
+nvm i squoosh-cli
+
+for ((i=0;i<=$n;i++))
+do
+	p=`cat $json|jq -r ".[$i].p"`
+	sid=`cat $json|jq -r ".[$i].src"`
+	s=$static/${sid}.png
+	id=`cat $json|jq -r ".[$i].id"`
+	o=$dir/card_origin2_${id}.png
+
+	if [ -f $o ];then
+		continue
+	fi
+
+	if [ ! -f $s ];then
+		curl -sL $url/yui_${sid}.png -o $s
+	fi
+
+	if [ ! -f $o ] && [ -z "`echo $s|grep ai_model`" ];then
+		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
+		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
+		squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' $o
+		rm $o.back
+	fi
+
+done

scpt/convert_s.zsh

@@ -0,0 +1,55 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=syui.ai/img
+
+case $OSTYPE in
+	darwin*)
+		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
+	linux*)
+		path_nvm_sh="";;
+esac
+
+dir=$dd/public/card
+static=$dd/static/img
+json=$dd/public/json/card.json
+mkdir -p $dir
+mkdir -p $static
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+bg=$static/card_bg_s.png
+br=$static/card_bg_sr.png
+for ((i=0;i<=$n;i++))
+do
+	p=`cat $json|jq -r ".[$i].p"`
+	sid=`cat $json|jq -r ".[$i].src"`
+	s=$static/${sid}.png
+	id=`cat $json|jq -r ".[$i].id"`
+	o=$dir/test_${id}s.png
+
+	if [ -f $o ];then
+		continue
+	fi
+
+	if [ ! -f $s ];then
+		curl -sL $url/yui_${sid}.png -o $s
+	fi
+
+	#if [ ! -f $o ];then
+		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
+		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
+		rm $o.back
+	#fi
+
+done
+
+cd $dir
+export NVM_DIR="$HOME/.nvm"
+[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
+nvm use 17
+nvm i squoosh-cli
+#rm og_*
+squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' *.png
+
+#mogrify -resize 1620x2160! *.png 

scpt/gif.zsh

@@ -0,0 +1,59 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=syui.ai/img
+
+case $OSTYPE in
+	darwin*)
+		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
+	linux*)
+		path_nvm_sh="";;
+esac
+
+dir=$dd/public/card
+static=$dd/static/img
+json=$dd/public/json/card.json
+mkdir -p $dir
+mkdir -p $static
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+bg=$static/card_bg.png
+br=$static/card_br.png
+
+for ((i=0;i<=$n;i++))
+do
+	p=`cat $json|jq -r ".[$i].p"`
+	sid=`cat $json|jq -r ".[$i].src"`
+	s=$static/${sid}.png
+	id=`cat $json|jq -r ".[$i].id"`
+	gif=$dir/card_$id.gif
+
+	if [ -f $gif ];then
+		continue
+	fi
+
+	nn=`ls $static/card_bgg_*.png|wc -l`
+	nn=$((nn - 1))
+
+	for ((ii=0;ii<=$nn;ii++))
+	do
+		title=$dir/null
+		o=${title}_${ii}.png
+		br=$static/card_bgg_${ii}.png
+		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
+		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
+		rm $o.back
+
+		export NVM_DIR="$HOME/.nvm"
+		[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
+		nvm use 17
+		nvm i squoosh-cli
+		squoosh-cli --webp '{"quality":100}' -d $dir --resize '{width:400,height:524}' $o
+
+	done
+
+	convert -layers optimize -loop 0 -delay 40 $dir/null_*.webp $gif
+	rm -f $dir/null_*
+
+done

scpt/gif_first.zsh

@@ -0,0 +1,59 @@
+#!/bin/zsh
+d=${0:a:h}
+dd=${0:a:h:h}
+
+url=syui.ai/img
+
+case $OSTYPE in
+	darwin*)
+		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
+	linux*)
+		path_nvm_sh="";;
+esac
+
+dir=$dd/public/card
+static=$dd/static/img
+json=$dd/public/json/card.json
+mkdir -p $dir
+mkdir -p $static
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+bg=$static/card_bg.png
+br=$static/card_br.png
+
+for ((i=0;i<=$n;i++))
+do
+	p=`cat $json|jq -r ".[$i].p"`
+	sid=`cat $json|jq -r ".[$i].src"`
+	s=$static/${sid}.png
+	id=`cat $json|jq -r ".[$i].id"`
+	gif=$dir/card_first_$id.gif
+
+	if [ -f $gif ];then
+		continue
+	fi
+
+	nn=`ls $static/card_bgg_first_*.png|wc -l`
+	nn=$((nn - 1))
+
+	for ((ii=0;ii<=$nn;ii++))
+	do
+		title=$dir/null
+		o=${title}_first_${ii}.png
+		br=$static/card_bgg_first_${ii}.png
+		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
+		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
+		rm $o.back
+
+		export NVM_DIR="$HOME/.nvm"
+		[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
+		nvm use 17
+		nvm i squoosh-cli
+		squoosh-cli --webp '{"quality":100}' -d $dir --resize '{width:400,height:524}' $o
+
+	done
+
+	convert -layers optimize -loop 0 -delay 40 $dir/null_*.webp $gif
+	rm -f $dir/null_*
+
+done

scpt/model_gif.zsh

@@ -0,0 +1,38 @@
+#!/bin/zsh
+inp=mp4
+for i in *.${inp}
+do
+	ffmpeg -i *.${inp} -r 8 %04d.png
+done
+
+inp=png
+out=jpg
+for i in *.${inp}
+do
+convert ${i%.*}.${inp} -gravity center -crop 825x1080+0+0 ${i%.*}_crop.${inp}
+convert ${i%.*}_crop.${inp} -resize 1620x2160! ${i%.*}.${out}
+done
+
+nn=`ls *.jpg|wc -l`
+static=~/ai/card/static/img
+bg=$static/card_bg.png
+br=$static/card_br.png
+for ((ii=1;ii<=$nn;ii++))
+	do
+		s=`ls *.jpg|awk "NR==$ii"`
+		o=null_${ii}.png
+		echo $o
+		if [ -f $b ];then
+			echo yes
+			else
+				echo no
+		fi
+		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
+		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
+		rm $o.back
+done
+
+gif=`ls *.mp4|cut -d . -f 1`.gif
+convert -layers optimize -loop 0 -delay 40 null_*.png $gif
+rm *.jpg
+rm *.png

scpt/ogimage.zsh

@@ -0,0 +1,56 @@
+#!/bin/zsh
+
+url=https://card.syui.ai
+d=${0:a:h}
+dd=${0:a:h:h}
+dir=$dd/public/card
+o_dir=$dd/static/img
+static=$dd/static/img
+json=$dd/public/json/card.json
+mkdir -p $dir
+mkdir -p $static
+n=`cat $json|jq "length"`
+n=`expr $n - 1`
+
+for ((i=0;i<=$n;i++))
+do
+	p=`cat $json|jq -r ".[$i].p"`
+	h=`cat $json|jq -r ".[$i].h"`
+	sid=`cat $json|jq -r ".[$i].src"`
+	s=$static/${sid}.png
+	id=`cat $json|jq -r ".[$i].id"`
+	o=$dir/card_$id.png
+	oo=$o_dir/og_${id}.png
+	o_url=$url/card/og_${id}.png
+	index=$o_dir/$id/index.html
+
+	if [ ! -f $oo ];then
+		convert $o -gravity center -extent 8000x4000 $oo
+	fi
+
+#	mkdir -p $o_dir/$id
+#
+#echo '
+#<!DOCTYPE html>
+#<html lang="en">
+#<head>
+#<title>card.syui.ai</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>card.syui.ai</title><link href="app.css" rel="preload" as="style"><link href="app.js" rel="preload" as="script"><link href="chunk-vendors.js" rel="preload" as="script"><link href="app.css" rel="stylesheet">
+#<meta name="twitter:card" content="summary">
+#<meta property="og:url" content="https://card.syui.ai">
+#' >! $index
+#
+#echo "
+#<meta property=\"og:title\" content=\"$h\">
+#<meta property=\"og:description\" content=\"$p\">
+#<meta property=\"og:image\" content=\"$o_url\">
+#" >> $index
+#
+#echo '
+#</head>
+#<body>
+#<div id="app"></div><script src="chunk-vendors.js"></script><script src="app.js"></script>
+#</body>
+#</html>
+#' >> $index
+
+done

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import VueMeta from 'vue-meta'
+Vue.use(VueMeta)
 Vue.config.productionTip = false
 
 new Vue({

static/img/ai_model_card_attack.png

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Page not found &middot; 404 Page not found</title>
+    <style type="text/css" media="screen">
+      body {
+        background-color: #f1f1f1;
+        margin: 0;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
+
+      a { color: #990000; text-decoration: none;}
+
+      a:hover { color: #4183c4;}
+
+      h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
+      p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
+
+      ul { list-style: none; margin: 25px 0; padding: 0; }
+      li { display: table-cell; font-weight: bold; width: 1%; }
+
+      .logo { display: inline-block; margin-top: 35px; }
+      .logo-img-2x { display: none; }
+      @media
+      only screen and (-webkit-min-device-pixel-ratio: 2),
+      only screen and (   min--moz-device-pixel-ratio: 2),
+      only screen and (     -o-min-device-pixel-ratio: 2/1),
+      only screen and (        min-device-pixel-ratio: 2),
+      only screen and (                min-resolution: 192dpi),
+      only screen and (                min-resolution: 2dppx) {
+        .logo-img-1x { display: none; }
+        .logo-img-2x { display: inline-block; }
+      }
+
+      #suggestions {
+        margin: 35px;
+        color: #ccc;
+      }
+
+span.icon-phoenix-world{
+    font-size: 50px;
+}
+
+    </style>
+    <link rel="stylesheet" href="/bower_components/icomoon/css/icomoon.css" />
+  </head>
+  <body>
+
+    <div class="container">
+
+      <h1>404</h1>
+
+      <div id="suggestions">
+
+      </div>
+
+      <a href="/">
+	      <span class="icon-phoenix-world"></span>
+      </a>
+
+    </div>
+  </body>
+</html>
+

static/img/ai_model_card_limit.png

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Page not found &middot; 404 Page not found</title>
+    <style type="text/css" media="screen">
+      body {
+        background-color: #f1f1f1;
+        margin: 0;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
+
+      a { color: #990000; text-decoration: none;}
+
+      a:hover { color: #4183c4;}
+
+      h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
+      p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
+
+      ul { list-style: none; margin: 25px 0; padding: 0; }
+      li { display: table-cell; font-weight: bold; width: 1%; }
+
+      .logo { display: inline-block; margin-top: 35px; }
+      .logo-img-2x { display: none; }
+      @media
+      only screen and (-webkit-min-device-pixel-ratio: 2),
+      only screen and (   min--moz-device-pixel-ratio: 2),
+      only screen and (     -o-min-device-pixel-ratio: 2/1),
+      only screen and (        min-device-pixel-ratio: 2),
+      only screen and (                min-resolution: 192dpi),
+      only screen and (                min-resolution: 2dppx) {
+        .logo-img-1x { display: none; }
+        .logo-img-2x { display: inline-block; }
+      }
+
+      #suggestions {
+        margin: 35px;
+        color: #ccc;
+      }
+
+span.icon-phoenix-world{
+    font-size: 50px;
+}
+
+    </style>
+    <link rel="stylesheet" href="/bower_components/icomoon/css/icomoon.css" />
+  </head>
+  <body>
+
+    <div class="container">
+
+      <h1>404</h1>
+
+      <div id="suggestions">
+
+      </div>
+
+      <a href="/">
+	      <span class="icon-phoenix-world"></span>
+      </a>
+
+    </div>
+  </body>
+</html>
+

static/img/ai_model_card_mode.png

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Page not found &middot; 404 Page not found</title>
+    <style type="text/css" media="screen">
+      body {
+        background-color: #f1f1f1;
+        margin: 0;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
+
+      a { color: #990000; text-decoration: none;}
+
+      a:hover { color: #4183c4;}
+
+      h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
+      p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
+
+      ul { list-style: none; margin: 25px 0; padding: 0; }
+      li { display: table-cell; font-weight: bold; width: 1%; }
+
+      .logo { display: inline-block; margin-top: 35px; }
+      .logo-img-2x { display: none; }
+      @media
+      only screen and (-webkit-min-device-pixel-ratio: 2),
+      only screen and (   min--moz-device-pixel-ratio: 2),
+      only screen and (     -o-min-device-pixel-ratio: 2/1),
+      only screen and (        min-device-pixel-ratio: 2),
+      only screen and (                min-resolution: 192dpi),
+      only screen and (                min-resolution: 2dppx) {
+        .logo-img-1x { display: none; }
+        .logo-img-2x { display: inline-block; }
+      }
+
+      #suggestions {
+        margin: 35px;
+        color: #ccc;
+      }
+
+span.icon-phoenix-world{
+    font-size: 50px;
+}
+
+    </style>
+    <link rel="stylesheet" href="/bower_components/icomoon/css/icomoon.css" />
+  </head>
+  <body>
+
+    <div class="container">
+
+      <h1>404</h1>
+
+      <div id="suggestions">
+
+      </div>
+
+      <a href="/">
+	      <span class="icon-phoenix-world"></span>
+      </a>
+
+    </div>
+  </body>
+</html>
+

static/img/ai_model_card_skill.png

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Page not found &middot; 404 Page not found</title>
+    <style type="text/css" media="screen">
+      body {
+        background-color: #f1f1f1;
+        margin: 0;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
+
+      a { color: #990000; text-decoration: none;}
+
+      a:hover { color: #4183c4;}
+
+      h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
+      p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
+
+      ul { list-style: none; margin: 25px 0; padding: 0; }
+      li { display: table-cell; font-weight: bold; width: 1%; }
+
+      .logo { display: inline-block; margin-top: 35px; }
+      .logo-img-2x { display: none; }
+      @media
+      only screen and (-webkit-min-device-pixel-ratio: 2),
+      only screen and (   min--moz-device-pixel-ratio: 2),
+      only screen and (     -o-min-device-pixel-ratio: 2/1),
+      only screen and (        min-device-pixel-ratio: 2),
+      only screen and (                min-resolution: 192dpi),
+      only screen and (                min-resolution: 2dppx) {
+        .logo-img-1x { display: none; }
+        .logo-img-2x { display: inline-block; }
+      }
+
+      #suggestions {
+        margin: 35px;
+        color: #ccc;
+      }
+
+span.icon-phoenix-world{
+    font-size: 50px;
+}
+
+    </style>
+    <link rel="stylesheet" href="/bower_components/icomoon/css/icomoon.css" />
+  </head>
+  <body>
+
+    <div class="container">
+
+      <h1>404</h1>
+
+      <div id="suggestions">
+
+      </div>
+
+      <a href="/">
+	      <span class="icon-phoenix-world"></span>
+      </a>
+
+    </div>
+  </body>
+</html>
+