COURSE DESIGN II REPORT

（ 2022 / 2023 学年 第 二 学期）

Title ： Science Tutoring

Major Computer Science

Name Oualid Sami

ID F20030108

Tutor Rui Huang

Department 计算机科学与技术系

Date 2023.6.5-2022.6.11

-
 计分（每项
课程目标 评价准则
10 分）
1、能够掌握计算机软件设计的相关基础知识，并能够针
对求解的工程问题，进行合理的分析与设计
课程目标 1：
2、具备一定自学能力与探索创新意识，能够充分利用教
通过课程设计提高学生的理论联 科书及其资源（如网络等）自学新知识与新技能
系实际、查阅资料、自学和独立分
析与解决复杂工程问题的能力 3、能够给出数据结构和算法的设计描述，给出关键算法
的流程图或伪代码，并给出各算法之间的结构关系描述
（40 分）
4、具备一定的人机交互设计意识，人机交互设计合理、
友好，操作简便

课程目标 2： 5、能够结合计算机软硬件资源，合理选用算法、数据结
要求学生在深入理解软件系统的 构、数据存储方式等技术手段，对求解的工程问题进行
相关知识基础上，综合运用所学的 有效建模和求解
方法和理论自主地完成课程设计。
6、能够选择合适的程序设计语言与软件开发平台，对求
要求学生通过软件课题的开发实
解的工程问题进行编程实现
践活动熟悉一种主流的数据库管
理系统产品和软件开发工具，掌握 7、掌握调试方法与工具，对程序开发过程中出现的问题
软件设计和开发的理论方法与实 进行分析、跟踪与调试，并能够进行充分测试
施步骤。要求学生在软件开发的过
程中考虑到可持续发展的因素，例 8、在完成课题要求的各项任务和指标时能够充分考虑可
如安全以及环保等。（40 分） 持续发展因素，例如安全和环保等

课程目标 3：
9、能够正确、完整地回答指导教师关于课题的问询，反
要求学生分组完成一次项目设计 映其对课题内容，并能够明确团队交流和协作的重要性，
与开发的全过程，掌握软件需求分 以及相关的项目管理知识具有较好的理解和掌握
析、软件设计、软件测试和团队协
同开发的基本理论和技术实践。应
用工程项目管理原理和经济决策 10、具备一定的语言表达能力与文字处理能力，能够结
方法划分和管理课题任务，培养项 合复杂工程问题撰写报告，报告内容和实验数据详实，
格式规范
目组织管理能力。（20 分）

-
Course Design I 能力测评总分

指导教师： 年 月 日

-
 Science Tutoring

1、Task and Objectives

My task is to create a science tutoring project with a front end using HTML, CSS, and JS,
and a back end using Python Flask. The project will incorporate the ChatGPT API. The main
objective is to allow users to choose between two modes of tutoring: scientific mode, where the
tutor uses scientific and profound terms, and oversimplified mode, where the tutor uses
simplified terms for beginners. The project will consist of three pages: index.html (home page),
menu.html (mode selection), and chat.html (chat interface). I will be using Visual Studio Code
for development, and the server will be launched through an IPv4 link that can be accessed by
devices sharing the same internet IP address as my laptop.

2、Demand Analysis and System Design

2.1 The main functionalities are listed as follows：
1) Mode Selection: Design a menu page (menu.html) where users can choose between
two modes: scientific mode and oversimplified mode. This selection will determine
the type of tutor they will be connected with during the chat.
2) Chat Interface: Create a chat page (chat.html) where users can communicate with
their selected science tutor. The chat interface should allow for real-time messaging
and display the conversation history.
3) Tutor Matching: Develop a system that matches users with appropriate tutors based
on their chosen mode and availability. The matching algorithm should consider
factors such as tutor expertise, availability, and user preferences.
4) Science Content: Integrate a database or API to provide a wide range of
science-related content and resources that tutors can refer to during the tutoring
sessions. This content should be accessible to tutors for effective explanations and
teaching.

-
 5) Responsive Design: Create a visually appealing and user-friendly interface using
HTML, CSS, and JS. The design should be responsive to different screen sizes and
devices for a seamless user experience.
6) Deployment: Deploy the application on a server accessible through an IPv4 link,
enabling users to access the tutoring platform from any device connected to the same
internet IP address as the server.

2.2 Data Design and ER graph

The data design consists on setting each element in the project in this case we have the input,
date, output, mode and others, but these are the main ones, the data itself are organized in the
following graph:

2.3 The Architecture of the System

The system architecture for my project follows a client-server model. Here is an overview
of the key components and their interactions:
Client-Side:
Front-End: The front-end components include HTML, CSS, and JavaScript files responsible
for rendering the user interface and handling user interactions. The main pages are index.html,
menu.html, and chat.html.

-
 User Interface: The user interface provides a visually appealing and user-friendly design to
facilitate a seamless experience for users.
Server-Side:
Back-End: The back-end of the system is built using Python Flask, a lightweight web
framework. Flask handles the server-side logic, processing user requests, and managing the
database interactions.
ChatGPT API: The system integrates with the ChatGPT API to provide the chat
functionality between users and tutors. The API allows for real-time messaging and facilitates the
exchange of scientific knowledge based on the selected mode (scientific or oversimplified).
Tutor Matching: A matching algorithm runs on the server-side to pair users with appropriate
tutors based on the selected mode and tutor availability. The algorithm considers factors like
expertise, availability, and user preferences.

2.4 UI Design
When it comes to the UI design, the CSS styling of the project integrates the NJUPT
university logo and the primary blue color to create a visually appealing and cohesive interface,
providing users with an engaging and immersive experience while reflecting the brand identity
of NJUPT. In the CSS styling, careful attention is given to create a visually cohesive and
user-friendly interface. The layout is designed to be intuitive, with clear navigation and
organized sections. The use of responsive design ensures that the project is accessible and
visually pleasing on various devices and screen sizes. The NJUPT blue color is utilized
strategically to highlight important elements, such as buttons, links, and interactive components,
creating visual emphasis and enhancing user interaction. It contributes to a harmonious and
visually consistent experience across different pages of the project. The pictures are inside the
project folder for more clarity!

-
-
3、Design of Related Data
1 Class and Data Type Design
In my project, I have implemented the following classes and data types to organize the data and
ensure efficient processing:

ServerApp Class: This class represents the Flask application and contains the route handlers for
different pages. It is responsible for rendering HTML templates, handling user requests, and
managing the chat functionality.
inputs: This is a list that stores the user inputs during the chat sessions. Each input represents a
question or query from the user.
outputs: This list stores the corresponding responses generated by the chat model. Each output is
the answer provided by the tutor in response to a user input.

dates: This list stores the timestamps for each user input and tutor output, indicating the time
when the interaction occurred.

mode: A Boolean variable that represents the selected tutoring mode. When mode is True, the
scientific mode is active, and when False, the oversimplified mode is active.

-
2 Flowchart of the system

4、Codes of the Key functions with Comments

Since I can't show the whole source code in this report, I will be showing some of the
highlighted key functions that are necessary...

server.py:

@app.route('/')
def index():
return render_template('index.html')

- This function handles the root URL ("/") and renders the "index.html" template, which
represents the home page of the tutoring platform.

@app.route('/menu')
def menu():
return render_template('menu.html')

- This function handles the "/menu" URL and renders the "menu.html" template, which
displays the menu page for selecting the tutoring mode.

@app.route('/false')
def false():
-
 global mode
mode = False
return redirect(url_for('clear'))

- This function handles the "/false" URL and sets the tutoring mode to False (oversimplified
mode). It then redirects to the 'clear' route.

@app.route('/true')
def true():
global mode
mode = True
return redirect(url_for('clear'))

- This function handles the "/true" URL and sets the tutoring mode to True (scientific mode).
It then redirects to the 'clear' route.

@app.route('/clear')
def clear():
inputs.clear()
outputs.clear()
return redirect(url_for('chat'))

- This function handles the "/clear" URL and clears the inputs and outputs lists. It then
redirects to the 'chat' route.

@app.route('/chat', methods=['GET', 'POST'])

def chat():
# ChatGPT API configuration and initialization
openai.api_key =
"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"
time = datetime.datetime.now().strftime("%I:%M %p")

# Mode-specific briefing and role assignment

if mode == False:
brief = "Hey, I'm your science tutor..."
role = "You're a science cool tutor..."

if mode == True:
brief = "Greetings, I am your science tutor..."
role = "You're a science serious tutor..."

if request.method == 'POST':
# User input processing
input = request.form['input']

-
 # Constructing messages for the ChatGPT API
messages = [
{"role": "system", "content": role}
]
content = input
messages.append({"role": "user", "content": content})

# Generating chat response using ChatGPT API

completion = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=messages
)
chat_response = completion.choices[0].message.content
messages.append({"role": "assistant", "content": chat_response})

# Storing inputs, outputs, and timestamps

output = chat_response
date = datetime.datetime.now().strftime("%I:%M %p")
inputs.append(input)
outputs.append(output)
dates.append(date)
print("Question:", input)
print("Answer:", output)

# Rendering the chat template with relevant data

return render_template('chat.html', time=time, brief=brief, mode=mode,
inputs=inputs, outputs=outputs, dates=dates)

# Rendering the chat template with initial data

return render_template('chat.html', time=time, brief=brief, mode=mode,
inputs=inputs, outputs=outputs, dates=dates)

- This function handles the "/chat" URL and serves as the main chat interface. It processes
user inputs, generates responses using the ChatGPT API, stores inputs/outputs, and renders the
chat template with relevant data.

chat.html:

{% for input in inputs %}

<div class="message user-message">
<div class="content">
<div class="text">
<div>{{ input }}</div>
</div>
<div class="timestamp">
-
 <div>{{ dates[loop.index0] }}</div>
</div>
</div>
</div>
<div class="message">
<div class="content">
<div class="text">
<div>{{ outputs[loop.index0] }}</div>
</div>
<div class="timestamp">
<div>{{ dates[loop.index0] }}</div>
</div>
</div>
</div>
{% endfor %}

- The purpose of this loop is to dynamically generate HTML elements for each input and
output pair, creating a visually organized chat history. The loop iterates through the arrays using
the {% for input in inputs %} and {% endfor %} tags. Within the loop, the individual input and
output messages are accessed using the input, outputs[loop.index0] and dates[loop.index0]
variables, respectively. The loop.index0 variable represents the current index of the loop,
allowing the correct corresponding output to be fetched from the outputs array.

5、Results
In conclusion, the implementation of the science tutoring project has achieved the desired results
by providing a comprehensive platform for users to receive science tutoring based on their
preferred mode. The project successfully integrates front-end and back-end technologies,
leverages the ChatGPT API for chat functionality, and incorporates essential features like mode
selection, chat interface, tutor matching, science content integration and responsive design. The
deployed server allows users to access the platform conveniently from various devices,
enhancing the overall user experience. Laoshi will receive the demo of how the program work
and also the source files.

6、Some Issues and How to

Issue 1：Server not accessible from devices on the same network.
How to：Confirm that the devices you're trying to access the server from are connected to
the same network.

Issue 2：Looping through inputs, outputs and dates in chat.html.

How to：Confirm that their arrays in server.py are correctly populated and maintained.
-
7、Conclusion
To summarize, the science tutoring project showcases the integration of front-end
technologies with back-end functionality, utilizing the ChatGPT API to provide a personalized
learning experience. The project's visual design, functional implementation, and user-friendly
interface contribute to its overall success in delivering science tutoring services. This Report is
made by Oualid Sami, my student number is F20030108.