人工智能实验——八数码难题可视化

最新推荐文章于 2022-11-02 00:23:33 发布

Asionm

最新推荐文章于 2022-11-02 00:23:33 发布

阅读量1.7k

点赞数 2

分类专栏：人工智能文章标签： flask python 后端

本文链接：https://blog.csdn.net/weixin_51735061/article/details/125656323

版权

人工智能专栏收录该内容

12 篇文章 8 订阅

订阅专栏

人工智能实验——八数码难题可视化

八数码难题可视化

人工智能实验——八数码难题可视化

八数码代码的实现部分可以看这个链接，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>