Djangoでwebアプリお試し

目的：つくった機械学習モデルをGUIから動かしたい．

もっと具体的に言うと，

画像or動画をアップロードして，検出した結果の画像を表示するような画面がほしい．

最終的には学科サーバーにおいてデーモン化とかしたり？

公式のチュートリアルを参考にしながらwebアプリを作る．

チュートリアル参考：https://docs.djangoproject.com/en/5.1/intro/tutorial01/

code:python

2024-12-13 17:05❯ python

Python 3.11.6 | packaged by conda-forge | (main, Oct 3 2023, 10:37:07) Clang 15.0.7 on darwin

Type "help", "copyright", "credits" or "license" for more information.

>> import django

>> print(django.get_version())

5.1.4

code:terminal

mkdir django_app

cd django_app

django-admin startproject mysite django_app

python manage.py runserver

赤い文字で以下の分が出た．かつ /adminに行くとエラーが出るので，言われた通りにする

code:terminal

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.

Run 'python manage.py migrate' to apply them.

赤文字が消えて，adminページができた．

urls.pyに追加して必要なページを増やす．

画像をどうこうする機能 /images

追加✔

削除

url取得して表示✔

機械学習にかける機能 /ml

最初のページ /✔

code:urls.py

from django.contrib import admin

from django.urls import path

from mysite import views

urlpatterns = [

path("admin/", admin.site.urls),

path('', views.home, name='index'),# 追加

]

code:views.py

def home(request):

context = {}

return render(request, "mysite/index.html", context)

code:mysite/templates/mysite/index.html

<!DOCTYPE html>

<html>

<body>

<h1>Hello World!</h1>

<p>Welcome to my first Django project!</p>

<ul>

<li>画像をどうこうする機能 <a href="/image">/image</a>

<ul>

<li>画像一覧→<a href="/image/list">/image/list</a></li>

<li>画像アップロード→<a href="image/upload">image/upload</a></li>

</ul>

</li>

<li>機械学習を試す<a href="/ml"></a>

<ul>

<li>機械学習を試す→<a href="/ml/do">/ml/do</a></li>

<li>機械学習の結果を取得する→<a href="/ml/result">/ml/resultかimage/ml_resultとか？</a></li>

</ul>

</li>

</ul>

</body>

</html>

setting.pyのinstalled_appに "mysite"を入れておく

画像をどうこうする機能を作る

code:terminal

python manage.py startapp image

url追加

code:mysite/urls.py

from django.contrib import admin

from django.urls import path,include

from mysite import views

urlpatterns = [

path("admin/", admin.site.urls),

path('', views.home, name='index'),

path("image/", include("image.urls")),

]

code:image/urls.py

from django.urls import path

from . import views

urlpatterns = [

path("", views.index, name="index"),

]

viewsもimage/index.htmlを表示するように

code:image/views.py

from django.shortcuts import render

def index(request):

context = {}

return render(request, "image/index.html", context)

setting.pyにINSTALLED_APPSに"image"を付け加える．

画像をアップロードしてデータベースにいれる．

こんなフォームから...

code:html

{% csrf_token %}

<label for="file">Choose an image or video to upload:</label>

<button type="submit">Upload</button>

</form>

を使ってpostできるか確かめる

code:views.py

def upload(request):

if request.method == 'POST':

return JsonResponse({'res': 'post'})

return JsonResponse({'error': 'Invalid form data'}, status=400)

で{'res': 'post'}返ってくるか確かめた．ので，モデル

media/uploadsに保存される．

code:image/models.py

from django.db import models

# Create your models here.

class UploadedImage(models.Model):

image = models.ImageField(upload_to='uploads/')

uploaded_at = models.DateTimeField(auto_now_add=True)

フォームのサーバー側でのバリデーション

code:image/forms.py

from django import forms

from .models import UploadedImage

class UploadImageForm(forms.ModelForm):

class Meta:

model = UploadedImage

fields = 'image'

code:image/views.py

from django.shortcuts import render

from django.http import JsonResponse

from .forms import UploadImageForm

def index(request):

context = {}

return render(request, "image/index.html", context)

def upload(request):

if request.method == 'POST':

form = UploadImageForm(request.POST, request.FILES)

print(form)

if form.is_valid():

image = form.save() # データベースに保存

return JsonResponse({'message': 'Image uploaded successfully!', 'image_url': image.image.url})

return JsonResponse({'error': 'Invalid form data'}, status=400)

return JsonResponse({'error': 'Only POST requests are allowed'}, status=405)

データベースを作る

code:terminal

2024-12-20 15:48❯ python manage.py makemigrations

Migrations for 'image':

image/migrations/0001_initial.py

+ Create model UploadedImage

code:terminal

2024-12-20 15:48❯ python manage.py migrate

Operations to perform:

Apply all migrations: admin, auth, contenttypes, image, sessions

Running migrations:

Applying image.0001_initial... OK

設定に足す．upladしたファイルがメディアに保存されるようになる．

code:setting.py

MEDIA_URL = '/media/'

import os

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

image/listの名前が微妙なのでimage/get_allにする変える．htmlも替えておく

code:urls.py

urlpatterns = [

path("", views.index, name="index"),

path("upload/", views.upload, name="upload"),

path('get_all/', views.get_all_images, name='get_all_images'),

]

code:models.py

from .models import UploadedImage

def get_all_images(request):

# データベースからすべての画像を取得

images = UploadedImage.objects.all()

# 画像URLのリストを生成

image_urls = {'id': image.id, 'url': image.image.url} for image in images

# JSONレスポンスを返す

return JsonResponse({'images': image_urls})

ディレクトリ構造からmedia以下にファイルがあるがアクセスできない．以下に静的ファイルにアクセスできるよう書く

code:mysite/urls.py

from django.conf import settings

from django.conf.urls.static import static

urlpatterns = [

path("admin/", admin.site.urls),

path('', views.home, name='index'),

path("image/", include("image.urls")),

]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

いちいちform飛ばされるのいやなのでjavascripでevent.preventDefault();してmessage受け取って成功か確認するようにhtmlを変更した．長いので貼り付けはしない．

モデル置いて最初にパラメータ入れて特定エンドポイントをidで叩いたら画像生成って感じでできる．