Chess-For-All.github.io/analysischat.html at main · Chess-For-All/Chess-For-All.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analysis chat</title>
    <style>
      body {
          align-items: center;
          background-color: lightgrey;
          text-align: center;
          marging: 110px
      }
      button {
          color: white;
          background-color: green;
          border-radius: 5px;
          cursor: pointer;
      }
      #html-chat {
          background-color: lightblue;
          border-radius: 3px;
      }
      #html-chat-history {
          background-color: light;
          border-radius: 3px;
      }
      #mes {
          background-color: light;
          border-radius: 3px;
      }
    </style>
</head>
<body>
    <main>
        <h1>Analysis chat</h1>
        <p><i>You can ask Stockfish about position</i></p>
        <div id="html-chat">
            <div id="html-chat-history"></div>
            <div>
            <lable for="mes">FEN:</lable>
            <input id="mes" name="mes">
            </div>
            <div>
            <label for="depth_id">Depth:</label>
            <input id="depth_id" name="depth_id">
            </div>
            <div><button type="submit" id="button1">Submit for analysis</button></div>
        </div>
        <script>
            $( document).ready(function() {
            CometServer().start({dev_id: 15 })
            htmljs_Chat_Init( $("#html-chat") )
            });
        </script>
        <script>
            async function analyzePosition(fen, depth = 15) {
            try {
                const engine = new Stockfish();
                await engine.init();
                await engine.sendCommand(`position fen ${fen}`);
                await engine.sendCommand(`go depth ${depth}`);
                let bestMove = null;
                let evaluation = null;

                engine.on('message', (message) => {
                    if (message.includes('bestmove')) {
                        const parts = message.split(' ');
                        bestMove = parts[1];
                    }
                    if (message.includes('score cp')) {
                        const cpValue = parseInt(message.split('cp ')[1].split(' ')[0]);
                        evaluation = cpValue / 100;
                    }
                    if (message.includes('score mate')) {
                        const mateMoves = parseInt(message.split('mate ')[1].split(' ')[0]);
                        evaluation = `мат в ${mateMoves} ходов`;
                    }
                });

                await new Promise((resolve) => {
                    engine.on('end', () => {
                        engine.quit();
                        resolve();
                    });
                });
            } catch (error) {
                alert('Error:', error);
                return null;
                }
            }

            async function format(fen, depth = 40) {
                const result = await analyzePosition(fen, depth);

                if (result) {
                    let answer = `
                        FEN: ${result.fen}
                        Best move: ${result.bestMove}
                        Eval: ${result.evaluation}
                        `
                    return {answer, result}
                }
            };

            function submit_for_analysis() {
                var history = document.GetElementById("html-chat-history");
                history.innerHTML = ""
                var fen = document.GetElementById("mes")
                var depth = document.GetElementById("depth_id")
                history.innerHTML += `<div><b>Me:</b> FEN: ${toString(fen.value)}, Depth: ${depth.value}</div>`;
                const gift = await format(fen.value, depth.value)
                history.innerHTML += `<div><b>SF:</b> ${gift.answer}</div>`;
            }
            document.getElementById("button1").addEventListener(() => {submit_for_analysis()})
        </script>
        <article>
            <a href="https://stockfishchess.org"><img src="https://stockfishchess.org/images/logo/icon_128x128@2x.webp" width="20px" height="20px"></a>
        </article>
    </main>
        <footer>
            <p>Sourses: <a href="https://stockfishchess.org">Stockfish</a></p>
        </footer>
</body>
</html>