В этом руководстве мы собираемся создать веб-приложение, которое будет извлекать текст из изображения и давать сводку записанного текста с помощью библиотеки gensim.
Ознакомьтесь с финальным проектом здесь: http://emmamichael.pythonanywhere.com/
Впусти:
Настроить проект и приложение
Создайте новый проект с помощью pycharm и назовите проект ocr. Откройте терминал и установите Django с помощью следующей команды:
pip install Django==3.1.3
затем выполните следующую команду, чтобы создать новый проект django с именем ocrandsummarize:
django-admin startproject ocrandsummarize .
запустите команду ниже, чтобы создать новое приложение «oands».
python manage.py startapp oands
Теперь нам нужно зарегистрировать новое приложение в INSTALLED_APPS. Поскольку мы собираемся работать со статическими и мультимедийными файлами, мы собираемся добавить настройки STATICFILES_DIRS, STATIC_ROOT, MEDIA_URL, MEDIA_ROOT в наш файл settings.py. Откройте файл settings.py в каталоге ocrandsummarize и добавьте следующий код, выделенный полужирным шрифтом.
from pathlib import Path
import os
# 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/3.1/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = #your secret key will be here
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'oands',
]
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 = 'ocrandsummarize.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'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 = 'ocrandsummarize.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.1/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/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
# Add these new lines
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
откройте свой терминал и выполните приведенную ниже команду, чтобы установить pytesseract, gensim, Pillow, поскольку мы собираемся работать с pytesseract для извлечения текста из изображений, gensim для обобщения записанного текста и Pillow для работы с изображениями:
подушка для установки пипа == 8.0.1
pip install pytesseract == 0.3.6
pip install gensim == 3.8.3
Добавьте следующий код, выделенный полужирным шрифтом, в файл urls.py в каталоге нашего проекта ocrandsummarize. Этот код будет включать файл urls.py нашего установленного приложения, а также добавлять конфигурацию для наших файлов мультимедиа.
from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static # new
from django.conf import settings # new
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('oands.urls')),
]
if settings.DEBUG: # new
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
URL-адрес нашего приложения
Создайте файл urls.py в каталоге нашего приложения oands. Добавьте приведенный ниже код, чтобы создать указатель ресурсов в нашей функции просмотра под названием «index», которая будет выполнять большинство действий, а также отображать наш html-файл.
from django.urls import path
from .views import index
urlpatterns = [
path('', index, name='index'),
]
Модель
Добавьте приведенный ниже код в наш файл models.py нашего приложения, чтобы создать модель под названием «Ocr» с одним полем изображения.
from django.db import models
# Create your models here.
class Ocr(models.Model):
image = models.ImageField(upload_to='images/')
выполните команду ниже, чтобы создать модель в нашей базе данных:
python manage.py makemigrations python manage.py migrate
Admins.py
Нам нужно зарегистрировать нашу модель в админке. Добавьте код, выделенный полужирным шрифтом, в наш admins.py нашего приложения.
from django.contrib import admin # Register your models here. from .models import Ocr admin.site.register(Ocr)
forms.py
Создайте файл forms.py в каталоге нашего приложения и добавьте приведенный ниже код для создания нашей формы, которая будет отображать одно поле «изображение» из модели.
from django import forms
from .models import Ocr
class ImageUpload(forms.ModelForm):
class Meta:
model = Ocr
fields = ['image']
Вид
Откройте файл views.py нашего приложения. Здесь будет реализована большая часть функциональности. Во-первых, мы импортируем pytesseract, summarize .., pytesseract преобразует текст в изображении в строку, а summarize поможет суммировать преобразованный текст.
from django.shortcuts import render
# import pytesseract to convert text in image to string
import pytesseract
# import summarize to summarize the ocred text
from gensim.summarization.summarizer import summarize
from .forms import ImageUpload
import os
# import Image from PIL to read image
from PIL import Image
from django.conf import settings
# Create your views here.
def index(request):
text = ""
summarized_text = ""
message = ""
if request.method == 'POST':
form = ImageUpload(request.POST, request.FILES)
if form.is_valid():
try:
form.save()
image = request.FILES['image']
image = image.name
path = settings.MEDIA_ROOT
pathz = path + "/images/" + image
text = pytesseract.image_to_string(Image.open(pathz))
text = text.encode("ascii", "ignore")
text = text.decode()
# Summary (0.1% of the original content).
summarized_text = summarize(text, ratio=0.1)
os.remove(pathz)
except:
message = "check your filename and ensure it doesn't have any space or check if it has any text"
context = {
'text': text,
'summarized_text': summarized_text,
'message': message
}
return render(request, 'formpage.html', context)
Приведенный выше код примет загруженное пользователем изображение, преобразует текст в изображении в строку, суммирует преобразованный текст и затем отображает преобразованный текст и обобщенный текст на html-страницу, которая будет просматриваться пользователем.
Шаблон
Создайте папку с именем templates в каталоге приложения нашего проекта, затем создайте html-файл с именем formpage.html внутри каталога и добавьте следующий код:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OCR AN IMAGE AND SUMMARIZE</title>
<link href="{% static 'css/form.css' %}" rel="stylesheet" type="text/css">
<script src="{% static 'js/form.js' %}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body >
<div class="container">
<div class="form-container">
<p style="color: red;">{{message}}</p>
<h1>
Ocr an Image and Summarize Using Gensim
</h1>
<form method="POST" enctype=multipart/form-data>
{% csrf_token %}
<label> Image Upload:</label>
<input type="file" class="form-control" id="image" name="image" />
<button class="button-primary" type="submit" >Submit</button>
</form>
<label><h2>Ocred Text:</h2></label>
<span class="textarea" role="textbox" contenteditable>{{text}}</span>
<label><h2>Summarized Text:</h2></label>
<span class="textarea" role="textbox" contenteditable>{{summarized_text}}</span>
</div>
</div>
</body>
</html>
форма отправит загруженное изображение в наше представление под названием «index», которое будет сканировать изображение и резюмировать текст. И необработанный записанный, и итоговый текст будут отображаться пользователю в теге «span».
Стиль
Создайте папку под названием ‘static’ в каталоге нашего проекта , а внутри папки создайте еще одну папку под названием ‘css’.
в папке css создайте файл css с именем «form.css» и добавьте следующий код
@media only screen and (min-device-width: 768px)
{
.form-container {
padding: 5%;
background: #ffffff;
border: 9px solid #f2f2f2;
max-width: 520px;
margin: auto;
}
}
body
{
background: #00CED1;
}
h1, p
{
text-align: center;
}
input, textarea , button
{
width: 100%;
}
textarea
{
height: 200px;
} <span class="textarea" role="textbox" contenteditable>{{text}}</span>
Приведенный выше код добавит стиль нашим тегам html.
Подписывайтесь на меня в твиттере: @emmakodes
linkedin: https://www.linkedin.com/in/emmanuelonwuegbusi/
Заключение
Поздравляю, вы дошли до конца этого урока. Вы можете ознакомиться с кодом здесь: https://github.com/emmakodes/ocrandsummarize
и не забудьте проверить текущий проект здесь: http://emmamichael.pythonanywhere.com/
