소개

「이미지로 쓰레기 분류!」 앱 작성 일지 4일째의 오늘은 Bootstrap를 사용해 프런트 엔드를 정돈해 나가고 싶습니다.

<기사 일람>

마지막까지의 개요

전회까지의 기사에서는 화상 인식 앱을 실장해 Django에 올리는 곳까지 했습니다. 이번에는 프런트 엔드를 정돈해 나가려고 생각합니다.

이미지 표시

우선, 이전의 과제로서 화상을 표시할 수 없다는 문제가 있었다. 그 대책을 써 둡니다.

원래, 이미지를 어떻게 표시시킬까라고 하면, 웹 페이지상에 이미지를 놓아 두고, 그 패스를 지정하는 것으로 HTML내에서 읽을 수 있게 되어 있습니다. 그래서 일단 백엔드 측에서 이미지를 저장하고 그것을 패스로 지정하고 프런트 엔드에서 읽는 형태로 구현합니다. (Javascript라면 Blob URL로 브라우저내만의 가상의 링크 같은 것을 작성할 수 있는 것 같지만, Django에서 비슷한 것을 할 수 있을지 몰랐다)

이전 준비

이미지를 처리할 수 있도록 설정을 추가해야 합니다.

garbage_proj/setting.py

# TEMPLATESのcontext_processors内に次を追加
'django.template.context_processors.media',

# 末尾あたりに以下を追加
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

또한 라우팅을 할 수 있도록 urls도 바꿔 둡니다.

garbage/urls.py

# urlpatterns = []のリストの後に以下を追加
 + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

이와 같이 설정해 두면, garbege/media 에 액세스가 왔을 때에 media(garbage,garbage_projと同列のディレクトリ) 를 참조하도록(듯이) 설정할 수 있습니다. 즉, <img src="./media/images/title.png"> 와 같이 하는 것으로, 링크가 연결됩니다.

템플릿 파일

이제 template 파일을 작성합니다.

garbage/templates/garbage/index.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像でゴミ分類！</title>
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/bootstrap.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
    <img src="./media/images/title.png" alt="画像でゴミ分類！" class="m-4" id="title">
    <div class="container row">
        <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2">
            <div class="container card p-4 mt-4">
                <p>分類を調べたい画像を入力してください</p>
                <form action="/garbage/result" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{ form }}
                    <br>
                    <button type="submit" class="mt-3">送信</button>
                </form>
            </div>
        </div>
    </div>
    <h4>既存の画像を利用する</h4>
    <div class="container row">
        <div class="col-md-6 p-3">
            <img src="./media/images/temp1.jpg" alt="画像1" class="sample-img">
        </div>
        <div class="col-md-6 p-3">
            <img src="./media/images/temp2.jpg" alt="画像2" class="sample-img">
        </div>
    </div>
</body>
</html>

Bootstrap의 그리드 시스템으로 쉽게 반응에 대응할 수 있는 것이 좋네요.
디자인의 현물은 다음과 같습니다.

garbage/templates/garbage/result.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像でゴミ分類！</title>
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/bootstrap.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
    <img src="./media/images/title.png" alt="画像でゴミ分類！" class="m-4" id="title">
    <div class="container row">
        <div class="col-lg-8 offset-lg-2">
            <div class="container card p-3 my-4 px-5">
                <h2 class="m-3">分類結果</h2>
                <img src="./media/images/image.png" alt="画像" id="result-img">
                <div class="container">
                    <table class="table">
                        <tr><th>分類</th><td>確率</td></tr>
                        {% for key, value in pred %}
                        <tr><th>{{ key }}</th><td>{{ value }}%</td></tr>
                        {% endfor %}
                    </table>
                    <a href="{% url "index" %}">Topへ戻る</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

pred에는 각각의 분류와 그 확률이 튜플의 리스트 같은 느낌이 되고 있습니다.
이것도 다음과 같습니다.

덧붙여서 CSS는 이런 느낌입니다.

garbage/static/garbage/css/style.css

body{
    text-align: center;
    background-color: rgb(239, 239, 240);
}

#title{
    float: center;
    width: 50%;
}

#result-img{
    width: 100%;
    height: auto;
}

.sample-img{
    width: 90%;
}

주로 이미지의 조정은 CSS로 쓰고 있습니다만, 그 이외는 기본적으로 bootstrap에 던져 버리고 있는 느낌입니다.

다음 번은 샘플에서도 움직이도록 view를 괴롭히거나 JavaScript를 써 가고 싶습니다.

<기사 일람>

「이미지로 쓰레기 분류!」앱 작성 일지 day1～데이터 세트의 작성～

「이미지로 쓰레기 분류!」앱 작성 일지 day2~VGG16에서 Fine-tuning~

「화상으로 쓰레기 분류!」어플리 작성 일지 day3~Django로 web어플리화~

「이미지로 쓰레기 분류!」앱 작성 일지 day4~Bootstrap로 프런트 엔드를 정돈한다~ ← 이마코코

「이미지로 쓰레기 분류!」앱 작성 일지 day5~Bootstrap로 프런트 엔드를 정돈하는 2~

「이미지로 쓰레기 분류!」앱 작성 일지 day6～디렉토리 구성의 수정～

「이미지로 쓰레기 분류!」앱 작성 일지 day7~사이드바의 슬라이드 메뉴화~

「이미지로 쓰레기 분류!」어플리 작성 일지 day8～heroku 배포～

참고문헌

장고 이미지 업로드 기능을 구현하는 방법

Reference

이 문제에 관하여(「이미지로 쓰레기 분류!」앱 작성 일지 day4~Bootstrap로 프런트 엔드를 정돈한다~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/eycjur/items/7b58c28eb8b16e722b5d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

「이미지로 쓰레기 분류!」앱 작성 일지 day4~Bootstrap로 프런트 엔드를 정돈한다~