5.2 将桌面应用转换为Web应用
ChatGPT的另一个重要的用途就是解决方案的转换，这不是简单的程序之间的转换，例如，将Python版的冒泡排序算法程序转换成JavaScript版的冒泡排序算法程序。这非常简单，GitHub Copilot以及很多AI工具能做到。但如果实现解决方案的转换，可能并不是输入一个程序、输出多个程序这么简单，甚至可能输入一个程序、输出多个程序，或者是多输入、多输出。本节会将第4章用Python实现的两个桌面应用直接转换为Web应用，而且不需要修改任何代码。
5.2.1 Web版滑块设置背景色
在4.1节中，我们基于PyQt6实现了一个使用滑块组件设置文本输入框背景色的应用，如果出于某种原因，可能是要给客户演示一下程序的运行效果，不方便直接用桌面应用，也可能需要实现一个同样功能的Web版的应用。在这种情况下，通常的做法就是让Web程序员根据用PyQt6实现的桌面应用的功能重新实现一遍。如果再加一个限制条件，要求你在1min内搞定这件事，你肯定在想，找外星人做吧。不过，ChatGPT能在1min之内实现一个完整的Web应用，而且实现的功能基本上是正确的。当然，这可能需要微调，微调的任务就交给GitHub Copilot来做吧！
尽管GitHub Copilot和GitHub Copilot Labs也可以转换程序，但只能一对一地转换，没有办法一对多，更没有办法多对多，所以在这种情况下，只能使用ChatGPT。
让ChatGPT转换程序要比直接让ChatGPT编写程序简单得多。只需要告诉ChatGPT要将当前程序转换成什么语言的程序即可，ChatGPT会自己分析，并找到目标语言与源语言对应的API以及特定的解决方案。下面就是给ChatGPT提供的文本。
下面是基于Python和PyQt6实现的用滑块组件设置文本输入框背景色的程序，将这段程序转换为用HTML、CSS
和JavaScript实现的Web应用。.css文件用color_slider.css，.js文件用color_slider.js。
import sys
from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSlider,
QTextEdit
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QColor
...
# 这里应该是完整的实现代码
读者在提交上述文本时，应该复制用PyQt6实现的应用的所有代码，本例中省略了PyQt6版本的大多数代码。
ChatGPT会根据上述的文本，生成.html文件、.css文件和.js文件对应的代码。
HTML代码如下。
代码位置：src/web/color_slider.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色滑动选择器</title>
<link rel="stylesheet" href="color_slider.css">
</head>
<body>
<div class="app-container">
<div id="color-display" class="color-display"></div> 颜色展示区域
<!-- 如何将color-display变为可输入的-->
<!-- 颜色信息标签 -->
<div id="color-label" class="color-label">颜色: #ffffff</div>
<!-- 红色滑块 -->
<label id="red-label" class="slider-label">红: 0</label>
<input id="red-slider" type="range" min="0" max="255" value="255" class
="slider">
<!-- 绿色滑块 -->
<label id="green-label" class="slider-label">绿: 0</label>
<input id="green-slider" type="range" min="0" max="255" value
="255" class="slider">
<!-- 蓝色滑块 -->
<label id="blue-label" class="slider-label">蓝: 0</label>
<input id="blue-slider" type="range" min="0" max="255" value
="255" class="slider">
</div>
<!-- 引入JavaScript -->
<script src="color_slider.js"></script>
</body>
</html>
CSS代码如下。
代码位置：src/web/color_slider.css
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f2f2f2;
}
.app-container {
text-align: center;
}
.color-display {
width: 150px;
height: 150px;
margin: 10px auto;
background-color: #ffffff;
}
.color-label {
margin: 10px;
font-size: 16px;
}
.slider-label {
display: block;
margin: 10px;
}
.slider {
width: 200px;
margin: 10px auto;
}
JavaScript代码如下。
代码位置：src/web/color_slider.js
const redSlider = document.getElementById('red-slider');
const greenSlider = document.getElementById('green-slider');
const blueSlider = document.getElementById('blue-slider');
const redLabel = document.getElementById('red-label');
const greenLabel = document.getElementById('green-label');
const blueLabel = document.getElementById('blue-label');
const colorDisplay = document.getElementById('color-display');
const colorLabel = document.getElementById('color-label');
// 为滑块添加输入事件监听
redSlider.addEventListener('input', updateColor);
greenSlider.addEventListener('input', updateColor);
blueSlider.addEventListener('input', updateColor);
function updateColor() {
// 获取滑块的值
const red = redSlider.value;
const green = greenSlider.value;
const blue = blueSlider.value;
// 更新标签文本
redLabel.textContent = '红: ${red}';
greenLabel.textContent = '绿: ${green}';
blueLabel.textContent = '蓝: ${blue}';
// 更新颜色展示区域和颜色信息标签
const color = 'rgb(${red}, ${green}, ${blue})';
colorDisplay.style.backgroundColor = color;
colorLabel.textContent = '颜色: ${rgbToHex(red, green, blue)}';
}
// 将RGB转换为十六进制
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (parseInt(r) << 16) + (parseInt(g) << 8)
+ parseInt(b)).toString(16).slice(1);
}
在浏览器中打开color_slider.html页面，会看到图5-4所示的效果。
图5-4 Web版滑块的效果
我们可以在图5-4上滑动3个滑块组件，图5-4中的颜色展示区域的背景色会随着3个滑块组件的移动而变化。但颜色值在变化时有如下两个小瑕疵。
颜色展示区域使用的是<div>标签，无法编辑，但用PyQt6实现的应用使用了文本输入框组件，可以编辑。
“红”“绿”“蓝”文字水平居中显示，而用PyQt6实现的应用在左侧显示。
尽管这两处瑕疵并不影响程序的核心功能，但为了追求与用PyQt6实现的应用的功能和样式尽可能相同，下面将使用GitHub Copilot对ChatGPT生成的代码进行微调。
1．把颜色展示区换成文本输入框
其实把颜色展示区换成文本输入框很简单，只需要将<div>标签换成<input>标签即可。当然，使用GitHub Copilot自动生成也可以。首先，在color_slider.html文件中，找到下面的代码。
<div id="color-display" class="color-display"></div>
然后，在这行代码下面，输入如下注释。
<!—如何将color-display变为可输入的-->
不断按Enter键和Tab键，GitHub Copilot会自动生成如下代码，可以自己替换value的值，如换成“颜色展示区”。
<input id="color-display" class="color-display" type="text" value="#ffffff">
最后，将<div>标签后面的“颜色展示区域”文字去掉。
2．颜色值左对齐
在color_slider.html文件中，找到如下代码。
<label id="red-label" class="slider-label">红: 0</label>
然后，在这行代码下方，输入如下注释。
<!-- 让red-label中的文字左对齐 -->
不断按Enter键和Tab键，GitHub Copilot会生成如下代码。
<label id="red-label" class="slider-label" style="text-align:left">红: 0</label>
对于绿色和蓝色，也按这个方法处理。现在刷新页面，会得到完善后的效果，如图5-5所示。
图5-5 改善后的Web版滑块的效果
