# tagto-smart-picture-social-web-app-with-flask

**Repository Path**: Enternal1690/tagto-smart-picture-social-web-app-with-flask

## Basic Information

- **Project Name**: tagto-smart-picture-social-web-app-with-flask
- **Description**: Python｜期末项目：Tagto - 智能图片社交平台 - 基于 Python 的 Flask Web App
- **Primary Language**: Python
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-01-07
- **Last Updated**: 2022-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Python 语言基础项目技术文档

***加分项：使用云端服务器部署***。
https://tagto.21yunbox.com

---

## 一、项目介绍

### 1. 项目标题与简介
[基于 Python 的 Flask Web App：Tagto - 智能图片社交平台](http://dillon0.pythonanywhere.com/)

Tagto（即 Tag + Photo）是一款智能图片社交 App 。能够通过智能 API 分析你所分享图片的内容，并主动给出图片标签。在现有的图片社交的基础上增添了智能标签功能，丰富了社交图片的展示和聚合功能，让你从容面对社交、分享美好。
![功能框架结构图](py_doc_img/功能框架结构图.png)

### 2. 问题表述
**用户画象**：热爱分享生活的16-25岁青年人群体。  
**用户使用场景**：在学习、生活、旅游时遇到值得纪念的时刻或好看的事物，主动拿出手机或相机进行拍摄。其后准备整理所拍的图片并发布到社交平台中，与朋友分享。  
**用户任务**：在网络社交平台中分享生活照片。  
**用户痛点**：图片是人与人交流生活、交流信息最直观的媒介。借助智能手机，人们拍摄或保存着越来越多的图片，同时也持续不断地把图片分享出去。但同时，数量庞大的图片使图片的分类和聚合比以往更难完成。  
**产品益点**：在用户分享图片的同时主动为用户提供参考的内容标签，省去用户对图片整理的时间与精力。  

---

## 二、解决方案

### 1. 项目规划与知识点
本项目主要通过注册与登陆系统、图文上传与展示、图像分类、日志系统4个功能，并配合 Bootstrap 的统一样式模版及 HTML 、CSS 相关知识来完成，以下为其中涉及到的Python基础知识点：
![知识图谱](py_doc_img/知识图谱.png)

### 2. 编程功能的基本描述
本项目主体功能有注册与登陆系统、图文上传与展示、图像分类。涉及：
- [HTML 表单](https://www.runoob.com/html/html-forms.html)，让用户输入账号/图文信息数据
```html
{% if form.username.errors %}
    {{ form.username(class="form-control is-invalid", placeholder="用户名") }}
    <div class="invalid-feedback">
        {% for error in form.username.errors %}
                    <span>{{ error }}</span>
        {% endfor %}
    </div>
{% else %}
    {{ form.username(class="form-control", placeholder="用户名") }}
{% endif %}
```
- [HTTP 请求](https://www.runoob.com/http/http-methods.html)，用于数据的传递
```python
@app.route('/register', methods=['GET', 'POST'])
```
```html
<form class="form-signin" method="post" action="">
```
- [数据库](www.sqlalchemy.org)，储存和使用账号/图文信息数据
```python
class User(db.Model, UserMixin):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    password = db.Column(db.String(60), nullable=False)
    posts = db.relationship('Post', backref='author', lazy=True)
```
- [Flask 第三方模块](https://blog.csdn.net/bbwangj/article/details/104646932)的使用
```python
from flask import request, redirect, render_template, flash, url_for, escape
from album_app import app, db, bcrypt
from album_app.forms import RegistrationForm, LoginForm, PostForm
from album_app.models import User, Post
from flask_login import login_user, current_user, logout_user, login_required
```
- [条件判断语句](https://www.runoob.com/python/python-if-statement.html)，对比用户输入的信息和数据库里已经储存的信息或判断用户的登陆状态
```python
if current_user.is_authenticated:
    return redirect(url_for('home'))
```
- [for 循环语句](https://www.runoob.com/python/python-for-loop.html)，提取数据库里的图文数据并在网页中展示
```html
{% for post in posts %}
    <!-- 省略 -->
    <img class="bd-placeholder-img card-img-top" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" role="img" src="{{ post.url }}">
        
    <p class="album_card_title" style="font-weight: 500;font-size: 1.5rem;">{{ post.title }}</p>
        
    <p class="card-text">{{ post.details }}</p>
        
    <small class="text-muted"><strong>{{ post.author.username }}</strong>｜{{ post.date_posted.strftime('%Y-%m-%d') }}</small>
    <!-- 省略 -->
{% endfor %}
```

识别图片内容与分类的人文需求功能，涉及：
- [图像分类 API](https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/concept-categorizing-images)，满足传播媒介、社交媒体中对图片内容分析的需求
- [字典](https://www.runoob.com/python/python-dictionary.html)、[列表](https://www.runoob.com/python/python-lists.html)，获取API输出的数据
```python
def photo_tag(image_url):
    """图像分类 API"""
    endpoint = "Your endpoint" # 自行填写
    subscription_key = "Your subscription key" # 自行填写
    # base url
    analyze_url = endpoint + "vision/v3.1/analyze"
    headers = {'Ocp-Apim-Subscription-Key': subscription_key}
    # 参数
    params = {'visualFeatures': 'Categories,Description,Color'}
    # 请求主体body
    data = {'url': image_url}  # 将image_url设置为想要分析的图像的URL
    response = requests.post(analyze_url, headers=headers, params=params, json=data)
    response.raise_for_status()
    analysis = response.json()
    detail = json.dumps(analysis)
    tag = json.loads(detail)['categories'][0]['name']  # 取首个标签值
    return tag
```

由于代码较多，后期需要对项目结构进行优化，对代码进行拆分与优化。涉及：
- 自定义[模块](https://www.runoob.com/python/python-modules.html)的使用
```python
import album_app.photo_analyse
from album_app.log_sys import log_request
```

以上各步骤均会遇到各类 Bug ，解决 Bug 需要：
- 查看[报错信息](https://cloud.tencent.com/developer/article/1654527)
- 在搜索引擎中搜寻解决方案

知识点 | HTML表单、HTTP 请求 | 数据库 | 条件判断语句、 for 循环语句 | API、字典、列表 | 自定义模块的使用 | Flask 第三方模块的使用
---|---|---|---|---|---|---
学习成本（天） | 1.5 | 3 | 2 | 3 | 1 | 2 
应用比例 | 15% | 20% | 25% | 15% | 10% | 15%

### 3. 云端项目部署的基本描述

![云端部署展示](py_doc_img/云端部署展示.png)

#### 3.1 页面链接与页面功能介绍
**网站基本内容展示功能组**
- 欢迎页：http://dillon0.pythonanywhere.com/
- 功能介绍页：http://dillon0.pythonanywhere.com/intro
- 日志系统管理页：http://dillon0.pythonanywhere.com/log

**注册与登陆系统功能组**
- 注册页：http://dillon0.pythonanywhere.com/register
- 注册成功页：http://dillon0.pythonanywhere.com/success
- 登陆页：http://dillon0.pythonanywhere.com/login

**图文展示功能组**
- 探索页：http://dillon0.pythonanywhere.com/explore
- 主页：http://dillon0.pythonanywhere.com/home
- 个人主页：http://dillon0.pythonanywhere.com/account

**图片分析功能组**
- 上传图文页：http://dillon0.pythonanywhere.com/upload

有效功能页面数量共10个

#### 3.2 数据流程图
![数据流程图](py_doc_img/数据流程图.png)

#### 3.3 云端功能 
完整的注册与登陆系统、图文上传与展示、图片分析、账号信息与图文信息储存（数据库）

#### 3.4 部署心得 
在本地运行良好的项目在部署后并不能立刻良好地运行。部署初期我遇到了很多问题：
1. 云端服务器的[虚拟环境](https://www.jianshu.com/p/5d120cfd386e)没有配置、[模块未安装](https://blog.csdn.net/Simon0529/article/details/109329599)；
2. 引用文件的路径使用了[相对路径而非绝对路径](https://www.w3cschool.cn/feijishu/je4c1px7.html)，导致[文件不能读取或写入](https://help.pythonanywhere.com/pages/NoSuchFileOrDirectory/)；
3. API接口未进入[网站的白名单](https://help.pythonanywhere.com/pages/RequestingWhitelistAdditions/)，导致使用不了[图片分析](https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/concept-categorizing-images)功能。  

本地运行良好的项目在部署后出问题是正常的现象，我们可以第一时间查看[文档](https://help.pythonanywhere.com/pages/)解决或通过邮件[寻求技术人员](https://www.pythonanywhere.com/forums/)的帮助。

---

## 三、学习/实践心得总结及感谢
完成项目依靠我们已有的编程知识是远远不够的，还需要不断地吸收其他新知识。十分感谢 [Corey Schafer](https://youtube.com/playlist?list=PL-osiE80TeTs4UjLw5MM6OjgkjFeUxCYH) 的教程及其[代码](https://github.com/CoreyMSchafer/code_snippets/tree/master/Python/Flask_Blog)对我的莫大帮助，让我从中学到了很多有助于本项目的知识。  
此外，编程与编程思维就如一张无边网格纸。虽然在完成项目的过程中代码、文件的数量不断增加，但编程思维为给代码进行了规范。我在项目中遇到了多次运行失败的挑战，但通过编程思维的理性思考，总是能够想到导致 Bug 的因素和解决 Bug 的方法。

---

独特有效外连URL：21个