5.2.2 Web版本计算器
在4.3节中，我们使用Python和Tkinter实现了一个计算器程序。通过ChatGPT，我们也可以很容易将其转换为Web版，只需要向ChatGPT提供下面的文本即可。
下面是用Python和Tkinter做的计算器程序，将这段程序转换为用HTML、CSS和JavaScript实现的Web程序。.css文件用calc.css，.js文件用calc.js。
import tkinter as tk
from tkinter import Entry, Button
root = tk.Tk()
root.geometry("300x400")
...
# 这里应该是完整的计算器代码
读者在向ChatGPT提交上述文本时，应该提供完整的Python版本计算器代码。然后就是见证奇迹的时刻，ChatGPT会在一瞬间为你生成Web版计算器的相关代码。
HTML代码如下。
代码位置：src/web/calc.html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="calc.css">
</head>
<body>
<div class="calculator">
<input id="display" type="text" readonly>
<div class="buttons">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">/</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">*</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">-</button>
<button class="number">0</button>
<button class="decimal">.</button>
<button class="equal">=</button>
<button class="operator">+</button>
</div>
</div>
<script src="calc.js"></script>
</body>
</html>
CSS代码如下。
代码位置：src/web/calc.css
.calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
#display {
width: 100%;
margin-bottom: 10px;
font-size: 18px;
padding: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
width: 100%;
font-size: 18px;
padding: 10px;
}
JavaScript代码如下。
代码位置：src/web/calc.js
document.addEventListener('DOMContentLoaded', function() {
var display = document.getElementById('display');
var buttons = document.getElementsByClassName('number');
var operators = document.getElementsByClassName('operator');
var decimal = document.getElementsByClassName('decimal')[0];
var equal = document.getElementsByClassName('equal')[0];
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
display.value += this.textContent;
});
}
for (var i = 0; i < operators.length; i++) {
operators[i].addEventListener('click', function() {
display.value += this.textContent;
});
}
decimal.addEventListener('click', function() {
if (!display.value.includes('.')) {
display.value += this.textContent;
}
});
equal.addEventListener('click', function() {
var expression = display.value;
var result = eval(expression);
display.value = result;
});
});
在浏览器中，打开calc.html页面，会显示计算器页面。图5-6展示了输入表达式的页面，图5-7展示了得到结果的页面。
图5-6 输入表达式的页面
图5-7 得到结果的页面
不过ChatGPT生成的代码有两个小瑕疵。
·<input>标签是只读的。calc.html中有一个小瑕疵，就是<input>标签多了一个readonly属性，让<input>成为只读的标签了，将readonly属性去掉，就与用Python和Tkinter实现的计算器程序一样了，这样可以同时通过文本框和按键输入数字了。
· 没有生成双击清除的代码。
在calc.js文件最后，输入下面的注释。
<span style="white-space:pre"> </span>// 为display添加鼠标左键双击事件<span style="white-space:pre"> </span>
不断按Enter键和Tab键，GitHub Copilot会自动生成如下代码，默认就将display中的内容清空了。
display.addEventListener('dblclick', function() {
display.value = '';
});
5.2.3 Web版图像搜索器
在4.5节中，我们使用Tkinter与Flask分别实现了图像搜索器的客户端和服务端程序。在本节中，我们使用ChatGPT直接将用Tkinter实现的客户端程序转换为Web版的图像搜索器客户端程序。直接发给ChatGPT如下文本就可以实现这个转换。
下面的代码是使用Python和Tkinter实现的图像搜索器客户端程序。将这段代码转换为用HTML、CSS、JavaScript等Web技术实现的Web版客户端程序。.js文件可以用单个文件存储。
# 这里要粘贴完整的Tkinter版客户端代码
ChatGPT会回复如下两段代码。
HTML代码如下。
代码位置：src/web/image_searcher.html
<!DOCTYPE html>
<html>
<head>
<title>图像搜索器</title>
<style>
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-container img {
width: 150px;
height: 150px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<label for="query-input">文件名</label>
<input id="query-input" type="text" />
<button id="search-button">搜索</button>
</div>
<div id="image-container" class="image-container"></div>
<script src="image_searcher.js"></script>
</body>
</html>
JavaScript代码如下。
代码位置：src/web/image_searcher.js
document.getElementById('search-button').addEventListener('click', function() {
const queryInput = document.getElementById('query-input');
const imageContainer = document.getElementById('image-container');
// 清空image-container
imageContainer.innerHTML = '';
// 获取查询字符串
const query = queryInput.value;
// 发送GET请求
fetch('http://localhost:1234/search query=${query}')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
const relativePaths = data.split(', ');
const base_url = 'http://localhost:1234/';
const absolutePaths = relativePaths.map(path => base_url + path);
// 对于每个图像URL，创建一个新的img元素，并添加到image-container中
absolutePaths.forEach(path => {
const img = document.createElement('img');
img.src = path;
imageContainer.appendChild(img);
});
})
.catch(error => {
console.error('There has been a problem with your fetch
operation:', error);
});
});
由于本例直接在浏览器中发送HTTP GET请求，属于跨域访问，因此需要改进server.py的代码，加入跨域访问支持。这里需要一个flask_cors模块，使用下面的命令安装该模块。
pip install flask_cors
然后，在server.py中，添加如下代码。
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 使Flask应用支持CORS
在浏览器中，访问image_searcher.html页面，然后在出现的搜索框中输入robot，单击“搜索”按钮，会显示图5-8所示的搜索结果。
图5-8 搜索结果
