北京哪家网站建设公司比较好,帝国cms怎么做网站地图,深圳市龙华区邮编,怎样做自己的手机网站涉及到后端的接口py#xff0c;前端html和js 这三部分就按照如下格式放到server项目主路径下#xff0c;这样后端机可以作为一个前端server
main.pystaticmain.jsmain.htmlhtml
首先是html要设定网页的显示
!DOCTYPE html
html
headtitle…涉及到后端的接口py前端html和js 这三部分就按照如下格式放到server项目主路径下这样后端机可以作为一个前端server
main.pystaticmain.jsmain.htmlhtml
首先是html要设定网页的显示
!DOCTYPE html
html
headtitle文件上传测试3/titlemeta charsetUTF-8 !-- 避免中文乱码 --stylebody {font-family: Arial, sans-serif;margin: 20px;}#preview, #other-image {display: none; /* 初始状态不显示图片叉烧包 */max-width: 100%;max-height: 400px;margin-top: 10px;}#display-area {display: flex;margin-top: 20px;}#display-area div {flex: 1;padding: 10px;border: 1px solid #ddd;margin-right: 10px;background: #f7f7f7;}#display-area div:last-child {margin-right: 0;}#form-container {margin-bottom: 10px;}.form-row {margin-bottom: 10px;}.input-small {width: 50px; /* 设置一个更小的宽度 */}#image-preview-container, #other-image-container {display: flex;justify-content: center;align-items: center;height: 400px; /* 或者你希望的高度 */border: 1px solid #ddd; /* 可选为了更好的可视化边框 */background: #f7f7f7; /* 可选背景颜色 */}#json-result-container {/* 滚动条... */height: 400px;overflow-y: auto; /* 固定这个模块的高度 *//* 允许这个模块内容垂直方向上的滚动 */}/style
/head
bodyh2文件上传测试3/h2div idform-containerinput typefile idfileInput onchangedisplayImage()div classform-rowlabel formuban_path模板路径:/labelinput typetext idmuban_path valuemuban_url/divdiv classform-rowlabel fortargetname目标名称:/labelinput typetext idtargetname valuename/divtable idmarksTabletheadtrthProject Type/ththpx/ththpy/ththpw/ththph/ththMin Range/ththMax Range/thth操作/th/tr/theadtbody!-- 表格的行将在这里动态添加 --/tbody/tablebutton typebutton onclickaddMark()添加 Mark/buttonbutton iduploadButton onclicksendRequest()上传/button/div
!-- 下方的展示区域 --
div iddisplay-area!-- 左边展示上传的图片 --div idimage-preview-containerimg idpreview src altImage preview will be shown here after selection. stylemax-width: 100%; height: auto;/div!-- 中间展示JSON结果 --div idjson-result-containerpre idresponse/pre/div!-- 右边占位展示其他图片 --div idother-image-container!-- 这里是其他地址的图片占位符 --!-- img srcplaceholder-image-url.jpg altOther image will be shown here. stylemax-width: 100%; height: auto;--img idother-image src altOther image will be shown here. stylemax-width: 100%; height: auto;/div
/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js/script
!--script srchttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js/script--
script typetext/javascript src/static/main_3.js/script
/body
/html
在headstyle里面给每个模块设定尺寸颜色啥的应该是叫内联CSS每个模块名字前要加#有点类似于函数定义声明
#name1, #name2 {
}一些具体的小功能比如缩小表格尺寸或者子模块啥的要用.name
.input-small {
}我要设定一个左中右的并排布局所以要用到Flexbox 在需要并排的那些模块内设定flex都是1就表示宽度一致
justify-content: center;
align-items: center;为了让这一模块内的东西居中展示如上设定
然后在body里面通过div id... 设定一个模块一般名字id是叫container啥的好分辨 在这个container里面再设定输入和子模块
input typefile idfileInput onchangedisplayImage()type是输入类型比如file、text id是这个控件的名字 onchange是这个输入控件链接的函数我是在js里面定义的函数有种Qt里的信号与槽的感觉 div classform-rowlabel formuban_path模板路径:/labelinput typetext idmuban_path valuemuban_url/divlabel、id、value涉及到js里定位变量啥的
通过button定义一些按钮控件输入文件的按钮好像是input控件自带的不需要自己再设定
下面的展示区域也大差不差src表示这个控件的路由我这里是通过js里获取的通过f12可以看到这里图片的路由是blob:的所以网上有些防止爬虫的图片或视频估计都是这种方式做的
最后js的src不能写相对于html的相对路径要写相对于主路径的“绝对路径”所以是/static/main_3.js 但是要注意前面那个jQuery的js必须是保证client能够访问到的。所以说如果是国内的client就别用第二个谷歌的jQuery了。可以试试CDN的那一个。否则就像翻不了墙一样client一直加载老半天最后算法接口也进不去后端能够看到是304的状态码。浏览器控制台也有报错
jquery.min.js:1 Failed to load resource: net::ERR_CONNECTION_TIMED_OUTjs
function addMark() {var table document.getElementById(marksTable).getElementsByTagName(tbody)[0];var newRow table.insertRow(table.rows.length);var markIndex table.rows.length; // 获取新行的索引用作projectTypevar cell1 newRow.insertCell(0);var projectTypeInput document.createElement(input);projectTypeInput.type text;projectTypeInput.className input-small; // 添加类名projectTypeInput.value markIndex; // 将索引值作为默认值cell1.appendChild(projectTypeInput);var cell2 newRow.insertCell(1);var px document.createElement(input);px.type text;px.className input-small; // 添加类名px.value 0; // 默认值cell2.appendChild(px);
首先这个函数是处理一个要自己手输参数的功能我这里做成了一个表格。第一列的序号设定成了按照索引每新增一行就自动填入行索引
style那里设定的input-small就在这里关联上使得输入框能够窄一些好看 var cell8 newRow.insertCell(7);var deleteButton document.createElement(button);deleteButton.innerHTML 删除;deleteButton.onclick function() {var rowIndex this.closest(tr).rowIndex;document.getElementById(marksTable).deleteRow(rowIndex);};cell8.appendChild(deleteButton);表格最后一列是个删除操作区所以元素是button而不是input并且关联一个函数不过删除之后第一列的索引还是没有变看之后的需求要不要修改一下
接着是获取表格元素的函数
function getMarksData() {var marksData [];var table document.getElementById(marksTable).getElementsByTagName(tbody)[0];for (var i 0, row; row table.rows[i]; i) {var mark {mark_project_type: row.cells[0].getElementsByTagName(input)[0].value,rect: {px: row.cells[1].getElementsByTagName(input)[0].value,py: row.cells[2].getElementsByTagName(input)[0].value,pw: row.cells[3].getElementsByTagName(input)[0].value,ph: row.cells[4].getElementsByTagName(input)[0].value},mixRange: row.cells[5].getElementsByTagName(input)[0].value,maxRange: row.cells[6].getElementsByTagName(input)[0].value};marksData.push(mark);}return marksData;
}
这个函数大体上就是把表格内输入的内容整理成我要发送的请求json的格式
function displayImage() {var fileInput document.getElementById(fileInput);var preview document.getElementById(preview);if (fileInput.files fileInput.files[0]) {preview.style.display block; // 显示图片元素preview.src URL.createObjectURL(fileInput.files[0]);preview.onload function() {URL.revokeObjectURL(preview.src); // 清除内存中的引用}} else {preview.style.display none; // 如果没有文件被选定隐藏图片元素}
}第三个函数是展示所选图片选择的图片通过blob那种方式直接形成一个url所以这里不用去考虑什么本地路径、协议上传什么的 设定未输入图片时displayNone避免出现叉烧包的情况美观一些
function sendRequest() {var fileInput document.getElementById(fileInput);var file fileInput.files[0];if (!file) {alert(请选择一个文件);print(file)return;}var mubanPathInput document.getElementById(muban_path);var targetNameInput document.getElementById(targetname);var marksData getMarksData(); // 获取用户添加的所有marks数据var reader new FileReader();reader.onload function(e) {var base64Image e.target.result;var data {aiParam: {file: base64Image, // 使用文件名muban_path: mubanPathInput.value,targetname: targetNameInput.value,mark: marksData}};$.ajax({url: http://IP:5000/api/analysis, // Flask端点type: POST,contentType: application/json,data: JSON.stringify(data), // 发送JSON数据success: function (response) {// 检查是否有img_path字段并更新右侧图片的srcif (response.imgBase64) {var otherImage document.getElementById(other-image);otherImage.style.display block; // 显示右侧图片元素// otherImage.src ..\\response.img_path;document.getElementById(other-image).src response.imgBase64;delete response.imgBase64; // 删除img_path以避免在展示的JSON中显示} else {console.error(img_path is missing in the response.);}var pretty_json JSON.stringify(response, null, 4);// 将格式化的JSON字符串显示在页面上document.getElementById(response).innerHTML pre pretty_json /pre;}});};if (file) {reader.readAsDataURL(file); // 将文件转换为Base64编码字符串}reader.onerror function(e) {console.error(文件读取出错: , e.target.error);};}这个函数就是重中之重把所有需要的输入信息整合成json后发送给后端。 这里面我设定了一个reader将图片转换为Base64编码字符串并整一个onload函数 这部分是文件读取器FileReader的事件处理程序。当文件读取器完成对文件的读取时会触发这个事件。e 是一个事件对象包含了读取操作的结果。 在这个函数内部你可以通过 e.target.result 获取到文件的内容。对于图片文件FileReader 以Base64编码的字符串形式返回文件内容。这个Base64字符串可以直接用于在网页上显示图片也可以发送到服务器作为文件的一部分。 不过输入的图片其路径不能通过浏览器获取好像是因为浏览器因为某些安全因素不允许访问本地文件系统而输入的图片又不能总是一个固定的路径否则直接在这里通过字符串的方式直接设定file路径了而且server和client一般也会分成不同的机子。所以图片需要通过某些协议或编码上传给后端后端为了某些需要在解码成图片后也可以保存在server上。我之前一个项目里用别人写的方法时上传的图片或视频可以直接类似挂载的方式形成一个路由去访问文件。我这里没有实现那样做而是采用base64编码来处理。
接着整合后的字典data通过ajax技术发送请求到Flask服务器 其中url里的IP要改成server的ip。如果写成127.0.0.1的话server本地当然可以用但client就不行了。 最后一部分的函数主要是我想把后端生成的json和图片也展示在网页上。虽然这个图片是保存在server上的但是路径在js访问不到的不同级的位置所以不能通过路径来获取的之前有试过同级路径的话是可以直接通过路径来获取这个other image的所以同样是以base64编码的方式给到网页。不过网页上就不展示那么老长的编码了在把生成的json写在网页上之前就把他del了。同时加上个缩进格式化美观一些记得加上pre。
py
from flask import Flask, request, jsonify, make_response
from flask_cors import CORS, cross_originimport base64app Flask(__name__)
CORS(app)调用CORS这个方法可能可以用来解决一些跨域问题现在有些电脑上可能会报304状态码得不到结果看看之后能不能解决这个问题 跨域资源共享CORS的问题。如果你的Flask后端和这个HTML界面不在同一个域上你可能需要在Flask应用中配置CORS。 # API端点
app.route(/api/analysis, methods[POST, OPTIONS])
def analysis():if request.method OPTIONS:# 自动处理预检请求设置必要的头信息并返回# 可能用于跨域共享response make_response()return responseif request.method POST:data request.jsonai_param data.get(aiParam, {})# 解析aiParam参数img_base64 ai_param.get(file)img_data base64.b64decode(img_base64.split(,)[1]) # 解码Base64字符串# 保存图片file_url f{save_path}/{datetime.now().strftime(%Y%m%d%H%M%S)}.png # 指定图片保存路径with open(file_url, wb) as img_file:img_file.write(img_data)muban_path ai_param.get(muban_path)targetname ai_param.get(targetname)result, img_path 算法(file_url)# 示例输出response {code: 200,msg: 成功,data: {result: result}}info_json json.dumps(response)with open(f{json_path}/file_{datetime.now().strftime(%Y_%m_%d_%H_%M_%S)}.json, w) as file:file.write(info_json)# 把生成的图片读取并base64编码with open(img_path, rb) as img_file:img_base64 base64.b64encode(img_file.read()).decode(utf-8)print(response,img_path)response[imgBase64] data:image/png;base64, img_base64return jsonify(response)app.route(/)
def index():return app.send_static_file(main_3.html)if __name__ __main__:app.run(host0.0.0.0, port5000)虽然前端给后端时base64编码没有什么附带信息直接给就行了但是后端给到前端base64编码时就必须加上那个前缀了否则效果就像叉烧包了一样显示alt信息
其实如果有个bucket什么的通过rabbitmq来处理数据可能就可以利用s3消息队列之类的方法来传输了。
index函数是在学如何做前端服务器的时候加上的这样可能好一些。不过之前的项目里其实IP:port/api这样的网址其实没有必要形成网页的只能说方法蛮多的 如果要像我这样做的话就要像开头那样把前端俩代码放到叫做static的静态路径下这里直接写html的文件名不加路径
算法 File E:\Anaconda3\envs\gait\lib\site-packages\torchvision\transforms\transforms.py, line 60, in __call__img t(img)File E:\Anaconda3\envs\gait\lib\site-packages\torch\nn\modules\module.py, line 1051, in _call_implreturn forward_call(*input, **kwargs)File E:\Anaconda3\envs\gait\lib\site-packages\torchvision\transforms\transforms.py, line 221, in forwardreturn F.normalize(tensor, self.mean, self.std, self.inplace)File E:\Anaconda3\envs\gait\lib\site-packages\torchvision\transforms\functional.py, line 335, in normalizetensor.sub_(mean).div_(std)
RuntimeError: The size of tensor a (4) must match the size of tensor b (3) at non-singleton dimension 0这个问题通常发生在处理RGBA红色、绿色、蓝色、Alpha透明度通道格式的图片时因为归一化操作可能只期望处理RGB格式的图片只有红色、绿色、蓝色通道。在你的情况下如果输入的是截图保存下来的图片并且这些图片是RGBA格式可能包含透明度通道则在处理时需要转换为RGB格式。 解决这个问题的一个方法是在对图片进行任何进一步处理之前将其从RGBA转换为RGB格式。 Pillow这个库有一些在图片中写文本、画框的现成函数ImageDraw但是新版本多了一个坐标输入和我们的算法结构不符所以最好注意如果要避免这个问题的话需要安装10版本以下的Pillow
效果 问题已解决
现在最大的问题就是304状态码了 明明是可以ping上的机子而且还是完全一致的网段但是打开路由后一直在加载加载过程中选择的图片无法在网页上显示。等到加载结束终于可以选择图片展示在网页上但是只要点击“上传”就只能维持在304状态码无法得到结果 其他某些不完全一致网段的电脑或手机虽然一开始可能有个304但是最终都可以轻松得到正确结果就很奇怪 以下是GPT4的建议 检查网络配置确认所有设备的网络配置正确确保它们可以互相访问。虽然它们处于不同的子网内但如果路由器或网络配置正确它们应该可以互相通信。检查浏览器安全设置浏览器的安全设置可能阻止跨子网的通信。确保浏览器允许从10.253.1.x 网段访问10.255.1.x 网段的资源。检查CORS跨源资源共享设置如果你的Flask应用使用了CORS确保其配置允许来自不同子网的请求。虽然你已经使用CORS(app)但可能需要检查更详细的配置。使用网络工具进行诊断使用网络诊断工具如Wireshark来监控和分析网络流量查看请求是否正确发送到后端服务器并查看后端服务器的响应。检查防火墙和安全软件确保没有防火墙或安全软件阻止跨子网通信。尝试不同的浏览器或设备在不同的浏览器或设备上测试你的前端页面看是否问题依旧存在。 在Microsoft Edge中处理CORS问题 你可以尝试使用Edge浏览器的扩展名 “Allow CORS: Access-Control-Allow-Origin”。这个扩展可以帮助你执行跨域Ajax请求。要安装这个扩展请访问Microsoft Edge Addons页面。 另外你可以在Edge的地址栏中输入 edge://flags/然后搜索CORS相关的设置。寻找“Block insecure private network requests”标志并尝试将其设置为禁用。这可能有助于解决某些CORS问题。 在Firefox中处理CORS问题 Firefox通常不提供直接在浏览器设置中更改CORS策略的选项。但是你可以使用类似于在Edge中的方法的扩展来允许跨域请求。对于开发和测试目的你可以使用特定的浏览器插件来绕过CORS限制但这通常不推荐用于生产环境。 Windows 10和Ubuntu上的防火墙设置 在Windows 10中你可以通过“控制面板” - “系统和安全” - “Windows Defender防火墙” - “高级设置”来管理防火墙规则。你可能需要添加一个新的入站规则来允许特定端口如5000的通信。在Ubuntu中如果你使用的是UFWUncomplicated Firewall可以通过命令 sudo ufw allow 5000 来允许5000端口的通信。如果你没有使用UFW你可能需要根据你使用的特定防火墙工具进行相应的配置。 关于HTTP 304状态码 HTTP 304状态码表示“未修改”这意味着请求的资源自上次请求以来未发生更改因此不需要重新传输。这通常用于浏览器的缓存优化。 解决方法
参见html部分采用国内的jQuery
