顯示具有 MindAR 標籤的文章。 顯示所有文章
顯示具有 MindAR 標籤的文章。 顯示所有文章

2024年8月20日 星期二

將MindAR的人臉辨識功能實現在Django並佈署在pythonanaywhere

人臉辨識功能程式:https://hiukim.github.io/mind-ar-js-doc/face-tracking-examples/minimal

Django專案名稱:mysite

Django應用程式:myapp

mysite/mysite/settings.py程式:

  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
"""
Django settings for mysite project.

Generated by 'django-admin startproject' using Django 5.0.6.

For more information on this file, see
https://docs.djangoproject.com/en/5.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.0/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "django-insecure-t%4l(u4od5t-9#-a&ttxayn4l=s-mk)y68e1jp%cr!xk(&gc5c"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['cmlin.pythonanywhere.com']


# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "myapp",
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

ROOT_URLCONF = "mysite.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [BASE_DIR/'templates'],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "mysite.wsgi.application"


# Database
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}


# Password validation
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
    },
]


# Internationalization
# https://docs.djangoproject.com/en/5.0/topics/i18n/

LANGUAGE_CODE = "en-us"

TIME_ZONE = "UTC"

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/

STATIC_URL = "static/"

# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

# default static files settings for PythonAnywhere.
# see https://help.pythonanywhere.com/pages/DjangoStaticFiles for more info
MEDIA_ROOT = '/home/cmlin/mysite/media'
MEDIA_URL = '/media/'
STATIC_ROOT = '/home/cmlin/mysite/static'
STATIC_URL = '/static/'

mysite/mysite/urls.py程式:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"""
URL configuration for mysite project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/5.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from myapp.views import index

urlpatterns = [
    path("admin/", admin.site.urls),
    path('', index),
]

mysite/myapp/views.py程式:
1
2
3
4
5
from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, "index.html", locals())

mysite/templates/index.html程式:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-face-aframe.prod.js"></script>
  </head>
  <body>
    <a-scene mindar-face embedded vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera active="false" position="0 0 0"></a-camera>
      <a-entity mindar-face-target="anchorIndex: 1">
        <a-sphere color="green" radius="0.1"></a-sphere>
      </a-entity>
    </a-scene>
  </body>
</html>

2022年2月1日 星期二

MindAR: 用WebAR技術把樹藝生命之美年暦與智創虎年賀歲圖片結合在一起,虎哩幸福一整年



在這2022年的大年初一,敏哥想用WebAR技術把國立臺灣工藝研究發展中心2020年推出的樹藝生命之美年暦與智創虎年賀歲圖片結合在一起,虎哩幸福一整年,歡迎大家留意智創生活科技與樹藝工坊,將在3月份推出科技藝術種子教師培訓課程,完全是免費的喔! 

1.準備作品與

準備樹藝生命之美年暦的電子檔,可以利用手機拍照。


2.準備智創虎年賀歲圖片檔(smartcreating.jpg)。


3.利用Image Targets Compiler編譯生命之美年暦的圖片檔,轉換成影像物件檔。


把生命之美年暦的圖片檔放到上圖Drop files to upload區。


按下上圖的Start鍵


按下上圖的Download compiled鍵,下載targets.mind,並自行建立一個資料夾,例如:TreeArt。

4.從https://hiukim.github.io/mind-ar-js-doc/quick-start/webpage,取得程式碼,並儲存AR html檔案。


5.開啟Web Server for Chrome,按下"啟用應用程式"。


6.按下上圖中"CHOOSE FOLDER",選擇儲存AR.html程式的資料夾TreeArt。

7.打開Chrome瀏覽器進行測試,http://127.0.0.1:8887/AR.html。


8.修改程式,儲存成AR2.html檔案。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
	  <a-assets>
        <img id="smartcreating" crossorigin="anonymous" src="smartcreating.jpg">
      </a-assets>
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
		<a-image src="#smartcreating"></a-image>
      </a-entity>
    </a-scene>
  </body>
</html>

9.把smartcreatimg.jpg檔案放到和AR.html同一個目錄下。

10.打開Chrome瀏覽器,並輸入http://127.0.0.1:8887/AR2.html,進行測試,就可以看到文章最上面圖片的景像。

2022年1月31日 星期一

MindAR: 使用Python Flask來實現WebAR

MindAR教學網站:https://hiukim.github.io/mind-ar-js-doc/face-tracking-quick-start/webpage

 Flask教學網站:https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application

1. 安裝Flask套件,開啟cmd應用程式,輸入下列命令。
pip install Flask


2.使用IDLE來編輯程式,並儲存成test.html。


3.切換到工作目錄,使用python test.py來啟動網站。


4.開啟Chrome進行測試,並輸入127.0.0.1:5000。


5.編輯face_ar.html文件,並儲存在templates資料來中,範例程式摘自Minimal Example

程式碼:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera active="false" position="0 0 0"></a-camera>

      <a-entity mindar-face-target="anchorIndex: 1">
    <a-sphere color="green" radius="0.1"></a-sphere>
      </a-entity>
    </a-scene>
  </body>
</html>

6.改寫Flask程式-test.py,黃底是新增的部份。

1
2
3
4
5
6
7
8
from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def hello_world(name=None):
    return render_template('face_ar.html', name=name)

7.測試時要記得在cmd中按下Ctrl+C來中止網站,再執行Python test.py命令重新啟動網站。
8.重新更新Chrome的內容,就可看到AR。


2022年1月30日 星期日

MindAR:人臉擴增實境應用

 MindAR教學文件:https://hiukim.github.io/mind-ar-js-doc/face-tracking-quick-start/webpage

AFrame教學文件:https://aframe.io/

編輯工具:Notepad++

測試工具:Web Server for Chrome

1.利用Notepad++編輯程式,範例一:Minimal Example,原始程式如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera active="false" position="0 0 0"></a-camera>

      <a-entity mindar-face-target="anchorIndex: 1">
    <a-sphere color="green" radius="0.1"></a-sphere>
      </a-entity>
    </a-scene>
  </body>
</html>

在程式的第4-6行中,分別告知MindAR臉部辨識、AFrame、以及MindAR臉部辨識與AFrame的腳本的來源。第10行中<a-scene>屬性mindar-face說明是由 MindAR 引擎來控制這個場景,第13行<a-entity> 屬性 mindar-face-target="anchorIndex: 1",說明引擎將跟踪特定的錨點位置-鼻尖。記得存成html文件,本範例為test2.html,並建立TreeArt資料夾。

2.開啟Web Server for Chrome,按下"啟用應用程式"。


3.按下上圖中"CHOOSE FOLDER",選擇儲存test2.html程式的資料夾TreeArt。

4.開啟Chrome瀏覽器,輸入http://127.0.0.1:8887/test2.html網址,就可看到一顆球在鼻尖上



5.修改anchorIndex: 1變成anchorIndex: 200,球就跑到下巴。

6. 參加AFrame文件或"好玩的WebVR,A-Fame一個針對3D/AR/VR所設計的網路框架"
,將a-sphere替換成a-box。


以下是有關臉部特點的測試:
臉部的特徵圖如下:

臉部特徵點測試:

雙人測試:


2022年1月23日 星期日

MindAR:從樹藝生命之美的卡片到設計網路版的擴增實境

 在2022年1月9日受邀參加"2022年南投縣文化資產學會第13屆第1次會員大會",這是一個很有文化內涵的學會,當天除了會員大會外,更安排國立台灣工藝研究發展中心主任張仁吉演講"台灣文化資產的價值與實踐"。


當天收到兩份很棒的工藝作品,其一是學會的藍染衣服,另一個是工藝中心的2022生命之美的年曆。





本文將介紹如何從李永謨老師創作的樹藝生命之美的卡片來實現擴增實境。
1.拍照並利用小畫家,把樹藝卡片存成圖檔。
建議您可以使用圖像分析器,來分析您圖片當成AR影像物件的品質。


2.製作AR影像目標(Image Targets Compiler),使用編譯器https://hiukim.github.io/mind-ar-js-doc/tools/compile,把上圖放在"Drop files here to upload"區,您也可以點選該區域來選擇要製AR影像目標。

選擇後

3.選擇上圖Start按鈕。

4.點選上圖"Download compiled"按鈕,儲存"targets.mind"。


把下面檔案儲存html檔,例如test.html。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        <a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
      </a-entity>
    </a-scene>
  </body>
</html>

6. 把targets.mind和test.html放在同一目錄下,例如:TreeArt。

7.執行test.html

雖然已經啟動攝像頭,但仍然無法工作,按下右鍵,選擇"檢查"按鈕。
可以發現下面問題
Fetch API cannot load file:///C:/cmlin/TreeArt/targets.mind. URL scheme "file" is not supported.

這是所謂"跨來源資源共享"的問題。

8.要解決這個問題,必須把上述兩個檔案(test.html, targets.mind)放在同一個URL中,就是網站。


就簡單方法就是安裝HFS(HTTP File Server),下載HFS伺服器執行畫面如下:

9.點選上圖Menu表單中Add files...按鈕,加入test.html和targets.mind兩個檔案。

10.打開chrome瀏覽器,輸入http://127.0.0.1/test.html,並打開攝像頭,拿著生命之美的卡片,對著攝像頭,可以展現AR。


11.另一種啟動Web伺服器的方法Web Server for Chrome