人工智能实验——八数码难题可视化
八数码难题可视化
八数码代码的实现部分可以看这个链接，https://blog.csdn.net/weixin_51735061/article/details/124775542，此片博文只介绍如何进行可视化。 （由于是第一次写这种web小程序，所以写得有点乱有点糟糕，但是可以勉强运行起来）
实现环境
- Python Flask框架
- html javascript
后端编写
我后端利用的是python的Flask轻量化框架，具体看代码部分。
导入必要的库并定义flask对象
from flask import Flask,render_template,request,send_from_directory
from Eight_Puzzle import *
from time import sleep
import os
#定义对象
app = Flask(__name__)
设置首页的路由路径与首页main函数
@app.route('/', methods=['GET','POST']) #GET和POST方法获取
def eg_main():
if request.method == 'GET': #若是直接get方式获取的话，直接渲染模板
return render_template('index.html')
if request.method == 'POST': #若是正常运行是要post数据的
if request.form.get('start_ef'): #如果点击了开始按键
value = [[1,2,3],[4,5,6],[7,8,9]]
result = {}
o_ef = request.form.get('start_ef').split(',')
#主程序
for x in range(3):
for y in range(3):
value[x][y] = int(o_ef[x*3+y])
ef = Ef(value)
if int(request.form.get("alg")) == 0:
result = Solution(ef).BFS()
elif int(request.form.get("alg")) == 1:
result = Solution(ef).DFS()
elif int(request.form.get("alg")) == 2:
result = Solution(ef).astar()
f = open("data/result.txt",'w') #用以记录数据 这里还可以优化
for i in result["ef"]:
f.write(str(i)+'\n')
f.close()
if result["code"]=="Failure" or result["code"]=="No Solution!":
return render_template('index.html', value=result["ef"], code=result["code"],alg=request.form.get("alg"))
else:
return render_template('index.html',value=result["ef"],depth=result["depth"],time=result["time"],code=result["code"],alg=request.form.get("alg")) #获取用户名
else:
return render_template('index.html') #获取用户名
结果路由与结果函数
在程序的功能中，我设置了结果导出功能，也就算八数码的推导过程。导出的是一个txt文件。
@app.route('/result')
def result():
directory = os.getcwd()+'\\data'
print(directory)
return send_from_directory(directory,"result.txt",as_attachment=True)
设置服务端口
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8080)
前端编写
对于前端，我是直接硬着上html的，东西都是东一块西一块凑出来的。使用的是jinja2模板
定义样式
<style>
.main{
width: 600px;
height: 600px;
margin: 0 auto;
text-align: center;
}
.col1, .col2, .col3 {
width: 300px;
height: 100px;
display: flex;
}
.item{
width: 30%;
display: flex;
align-items: center;
background-color: skyblue;
margin: 5px;
padding-left: 30px;
color: aliceblue;
font-size: 40px;
}
.two{
background-color:crimson;
}
.mytxt{
font-size: 40px;
background-color: transparent;
border: 0px;
width: 30px;
height: 40px;
color: aliceblue;
}
.div1{
position: absolute;
top: 135px;
left: 330px;
}
.div2{
position: absolute;
top: 135px;
left: 905px;
}
.div_op{
position: absolute;
top: 70px;
left: 270px;
width: 1000px;
height: 600px;
background:#000000;
filter:alpha(opacity=65); /*支持 IE 浏览器*/
-moz-opacity:0.65; /*支持 FireFox 浏览器*/
opacity:0.65; /*支持 Chrome, Opera, Safari 等浏览器*/
border-radius:20px;
z-index:-1; <!-- 图层位置-->
}
.div3{
position: absolute;
top: 10px;
left: 10px;
color:white;
font-size:5px;
}
.div4{
position: absolute;
top: 500px;
left: 330px;
color:white;
font-size: 20px;
}
.button1{
position: absolute;
font-size:20px;
width:100px;
height:100px;
top: 500px;
left: 700px;
color:white;
background: red;
border-radius:50px;
border: 5;
box-shadow: 0px 1px 25px 5px #808080;
}
.button2{
position: absolute;
width:100px;
height:100px;
top: 500px;
left: 1000px;
color:white;
background: red;
border-radius:50px;
border: 5;
box-shadow: 0px 1px 25px 5px #808080;
font-size:20px;
}
.radio1{
position: absolute;
top: 460px;
left: 330px;
color: white;
font-size:20px;
}
.radio2{
position: absolute;
top: 460px;
left: 410px;
color: white;
font-size:20px;
}
.radio3{
position: absolute;
top: 460px;
left: 490px;
color: white;
font-size:20px;
}
.button3{
position: absolute;
height: 100px;
width: 200px;
top: 240px;
left: 670px;
color: black;
background-color: transparent;
font-size:10px;
border:none;
}
.img1{
position: absolute;
height: 100px;
width: 200px;
top: 240px;
left: 670px;
color: white;
font-size:20px;
}
</style>
定义js脚本
<script>
function start_check(){
<!--将九宫格的值收集起来 并判断是否为空-->
var arr=new Array();
for(var i = 0; i < 3; i++){
arr[i]=new Array(i);
for(var j = 0; j < 3; j++){
var value = document.getElementById("s"+i+"_"+j).value;
<!-- 上面用到了字符串拼接 直接拼即可-->
if(value){
arr[i][j]=value;
}
else{
alert("八数码不完整，请重新输入！");
return false;
}
}
}
var start = document.getElementById("start_ef_1");
start.value = arr;
return true;
}
{% if code=="Success" %}
window.onload=function(){
alert("成功,点击导出下载结果");
}
{% elif code=="Failure" %}
alert("失败");
{% elif code=="No Solution!" %}
alert("此八数码无解");
{% endif %}
function jump(){
window.location.href="/result";
}
var ob = document.getElementsByClassName("div2");
var len = ob.length;
var index = 0;
function next() {
index=index+1;
ob[index].style.display="block";
}
</script>
页面主体部分
<body background="static/img/bg2.png">
<div class="main">
<h1 style="font-size:60;color:#F0FFFF;">八数码解题小工具</h1>
{% if value %}
<div class="div1">
<div class="col1">
<!-- 透明输入框-->
<div class="item"><input type="text"
id="s0_0"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][0][0]}}"
>
</div>
<div class="item"><input type="text"
id="s0_1"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][0][1]}}" ></div>
<div class="item"><input type="text"
id="s0_2"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][0][2]}}" ></div>
</div>
<div class="col2">
<div class="item"><input type="text"
id="s1_0"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][1][0]}}" ></div>
<div class="item"><input type="text"
id="s1_1"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][1][1]}}" ></div>
<div class="item"><input type="text"
id="s1_2"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][1][2]}}" ></div>
</div>
<div class="col3">
<div class="item"><input type="text"
id="s2_0"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][2][0]}}" ></div>
<div class="item"><input type="text"
id="s2_1"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][2][1]}}" ></div>
<div class="item"><input type="text"
id="s2_2"
size="0"
maxlength="1"
class="mytxt"
value="{{value[0][2][2]}}" ></div>
</div>
</div>
{% else %}
<div class="div1">
<div class="col1">
<!-- 透明输入框-->
<div class="item"><input type="text"
id="s0_0"
size="0"
maxlength="1"
class="mytxt"
value="1"
>
</div>
<div class="item"><input type="text"
id="s0_1"
size="0"
maxlength="1"
class="mytxt"
value="2" ></div>
<div class="item"><input type="text"
id="s0_2"
size="0"
maxlength="1"
class="mytxt"
value="3" ></div>
</div>
<div class="col2">
<div class="item"><input type="text"
id="s1_0"
size="0"
maxlength="1"
class="mytxt"
value="8" ></div>
<div class="item"><input type="text"
id="s1_1"
size="0"
maxlength="1"
class="mytxt"
value="0" ></div>
<div class="item"><input type="text"
id="s1_2"
size="0"
maxlength="1"
class="mytxt"
value="4" ></div>
</div>
<div class="col3">
<div class="item"><input type="text"
id="s2_0"
size="0"
maxlength="1"
class="mytxt"
value="7" ></div>
<div class="item"><input type="text"
id="s2_1"
size="0"
maxlength="1"
class="mytxt"
value="6" ></div>
<div class="item"><input type="text"
id="s2_2"
size="0"
maxlength="1"
class="mytxt"
value="5" ></div>
</div>
</div>
{% endif %}
<!-- 第二层-->
{% if value %}
{% for i in value %}
{% if i==value[0] %}
<div class="div2" style="display:block;">
<div class="col1">
<!-- 透明输入框-->
<div class="item" class="mytxt">{{i[0][0]}}</div>
<div class="item" class="mytxt">{{i[0][1]}}</div>
<div class="item" class="mytxt">{{i[0][2]}}</div>
</div>
<div class="col2">
<div class="item" class="mytxt">{{i[1][0]}}</div>
<div class="item" class="mytxt">{{i[1][1]}}</div>
<div class="item" class="mytxt">{{i[1][2]}}</div>
</div>
<div class="col3">
<div class="item" class="mytxt">{{i[2][0]}}</div>
<div class="item" class="mytxt">{{i[2][1]}}</div>
<div class="item" class="mytxt">{{i[2][2]}}</div>
</div>
</div>
</div>
{% endif %}
<div class="div2" style="display:none;">
<div class="col1">
<!-- 透明输入框-->
<div class="item" class="mytxt">{{i[0][0]}}</div>
<div class="item" class="mytxt">{{i[0][1]}}</div>
<div class="item" class="mytxt">{{i[0][2]}}</div>
</div>
<div class="col2">
<div class="item" class="mytxt">{{i[1][0]}}</div>
<div class="item" class="mytxt">{{i[1][1]}}</div>
<div class="item" class="mytxt">{{i[1][2]}}</div>
</div>
<div class="col3">
<div class="item" class="mytxt">{{i[2][0]}}</div>
<div class="item" class="mytxt">{{i[2][1]}}</div>
<div class="item" class="mytxt">{{i[2][2]}}</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="div2" style="display:block;">
<div class="col1">
<!-- 透明输入框-->
<div class="item" class="mytxt">0</div>
<div class="item" class="mytxt">0</div>
<div class="item" class="mytxt">0</div>
</div>
<div class="col2">
<div class="item" class="mytxt">0</div>
<div class="item" class="mytxt">0</div>
<div class="item" class="mytxt">0</div>
</div>
<div class="col3">
<div class="item" class="mytxt">0</div>
<div class="item" class="mytxt">0</div>
<div class="item" class="mytxt">0</div>
</div>
</div>
</div>
{% endif %}
<div class="div_op">
</div>
<!-- TIPS框-->
<div class="div3">
Tips:<br>
先点击开始等成功消息弹出后再点箭头<br>
进行推算或点击导出结果下载txt，需<br>
要注意的是由于初次开发所以下载的文<br>
件txt可能是上次运行的结果，所以一<br>
定要先等成功运行框弹出后再下载结果。
</div>
<form action="/" method="post" onsubmit="return start_check()">
<!-- 传递必要参数-->
{% if alg=='1' %}
<label class="radio1"><input name="alg" type="radio" value="0" />BFS</label>
<label class="radio2"><input name="alg" type="radio" value="1" checked />DFS</label>
<label class="radio3"><input name="alg" type="radio" value="2" />A*</label>
{% elif alg=='2' %}
<label class="radio1"><input name="alg" type="radio" value="0" />BFS</label>
<label class="radio2"><input name="alg" type="radio" value="1" />DFS</label>
<label class="radio3"><input name="alg" type="radio" value="2" checked />A*</label>
{% else %}
<label class="radio1"><input name="alg" type="radio" value="0" checked />BFS</label>
<label class="radio2"><input name="alg" type="radio" value="1" />DFS</label>
<label class="radio3"><input name="alg" type="radio" value="2" />A*</label>
{% endif %}
<button type="submit" class="button1" name="start_ef" id="start_ef_1" value="123">
开始
</button>
</form>
<button type="button" class="button2" onclick="jump()">
导出结果
</button>
<div class="div4">
{% if depth %}
<p>目前深度: {{depth}}</p>
<p>运行时间: {{time}}s</p>
{% else %}
<p>目前深度:</p>
<p>运行时间:</p>
{% endif %}
</div>
<img src="static/img/arrow.png" class="img1">
<button type="button" class="button3" id="button3" onclick="next()">
NEXT
</button>
</body>
</html>
若需要源代码文件可以在我主页中下载！
扫一扫
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
