python：bottle + eel 模仿 mdict 查英汉词典

Eel 是一个轻量的 Python 库，用于制作简单的类似于离线 HTML/JS GUI 应用程序，并具有对 Python 功能和库的完全访问权限。

Eel 托管一个本地 Web 服务器，允许您使用 Python 注释函数（annotate functions），可以从 JavaScript 调用python函数，也可以从python调用JavaScript函数。

Eel 基于 Bottle 和 gevent 构建，它们提供了类似于 JavaScript 的异步事件循环。

用chrome 访问 https://www.lfd.uci.edu/~gohlke/pythonlibs/#python-lzo
下载 python_lzo-1.14-cp38-cp38-win_amd64.whl
pip install python_lzo-1.14-cp38-cp38-win_amd64.whl

pip install readmdict ;

pip install eel

Eel-0.16.0.tar.gz (24 kB)
bottle-websocket-0.2.9.tar.gz (2.0 kB)
whichcraft-0.6.1-py2.py3-none-any.whl (5.2 kB)
gevent_websocket-0.10.1-py3-none-any.whl (22 kB)
gevent-23.9.1-cp310-cp310-win_amd64.whl (1.5 MB)
zope.event-5.0-py3-none-any.whl (6.8 kB)

编写 mdict_eel.py 如下

# -*- coding: utf-8 -*-
""" web server 用于查询英汉词典 """
import os
import sys
import json
import time
from readmdict import MDX
import bottle
from bottle import route, post, request, static_file
import eel
import win32com.client  # TTS
sapi = win32com.client.Dispatch("SAPI.SpVoice")

start_time = time.time()
os.chdir("/mdict")
# 加载.mdx文件
filename = "your.mdx"
mdx = MDX(filename)
headwords = [*mdx]       # 单词名列表
items = [*mdx.items()]   # 释义html源码列表
n = len(headwords)
m = len(items)
if n == m:
    print(f'{filename} 加载成功：共{n}条')
    end_time = time.time()
    print('cost %f second' % (end_time - start_time))
else:
    print(f'ERROR:加载失败 {n}!={m}')
    sys.exit(1)

app = bottle.Bottle()

# 静态资源的目录通常称为public或static
@app.route('/<filepath:path>')
def server_static(filepath):
    return static_file(filepath, root='./')

def eng_han(txt):
    """ 英译中 """
    if not txt.isascii():
        return 'Maybe text is not english'
    word = txt.encode()
    word1 = txt.capitalize().encode() # 第1个字母变大写
    global headwords, items
    try: # 查词，返回单词和html文件
        if word in headwords:
            wordIndex = headwords.index(word)
        else:
            wordIndex = headwords.index(word1)
        word,html = items[wordIndex]
        result = html.decode()
        if result.startswith('@@@LINK='):
            w = result[8:].strip()
            result = '<a href="/trans?txt='+w+ '">' +w+ '</a>'
        else:
            result = result.replace('<img src="','<img src="/data/')
            result = result.replace('"/thumb/', '"data/thumb/')
            result = result.replace('entry://', '/trans?txt=')
            #result = result.replace('sound://','/data/')
    except:
        result = f"<h3>{txt} is not in word_list.</h3>"
    return result

@app.route('/prefix')
def prefix():
    """ 前缀匹配 """
    try:
        txt = request.query.txt
    except:
        return '1: get txt error'
    if len(txt.strip()) ==0:
        return 'text is null'
    print(txt)
    if len(txt) > 1:
        alist = []
        word = txt.strip().lower() # 字母变小写
        for hw in headwords:
            hws = hw.decode().lower()
            if hws.startswith(word):
                hws = hw.decode()
                alist.append(hws)
        if len(alist) > 0:
            result = json.dumps(alist)
        else:
            result = '["not found"]'
    else:
        result = '["length too short"]'
    return result

@app.route('/trans')
def trans():
    """ method=GET 英译中"""
    try:
        txt = request.query.txt
    except:
        return '1: get txt error'
    if len(txt.strip()) ==0:
        return 'text is null'
    print(txt)
    result = eng_han(txt)
    return result

@app.route('/trans', method='POST')
def trans():
    """ 英译中 """
    try:
        #txt = request.forms.get('txt')
        txt = request.POST.get('txt')
    except:
        return '1: get txt error'
    if len(txt.strip()) ==0:
        return 'text is null'
    print(txt)
    result = eng_han(txt)
    return result

eel.init('.')

@eel.expose           # 暴露python函数给js
def py_speak(txt):
    """ text TTS """
    if txt.strip() !='':
        sapi.Speak(txt)

#eel.start('index.html', app=middleware)
eel.start('index5.html', app=app, size=(1000,600))
#eel.start('index5.html', app=app, mode="edge", size=(1000,600))

编写 index5.html 如下

<!DOCTYPE html>
<html lang="en">
<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> 
    <script src="/eel.js"></script>
    <script src="jquery-3.2.1.min.js"></script>
<style>
/* portrait 判断为竖屏 */
@media only screen and (orientation: portrait){
     #lab1 {display:none;}
} 
/* landscape 判断为横屏 */ 
@media only screen and (orientation: landscape){
     #lab1 {display: ;} 
}    
</style>
</head>
<body>
  <form name="form" id="form" action="trans" method="POST" target="iframe">
    <label id="lab1">请输入：</label>
    <input type="text" name="txt" id='txt' size="30" placeholder="请输入 a word">
    <input type="submit" name="eng_han" value="英译汉">
    <input type="button" name="btn1" id="btn1" value="前缀查询">
    <input type="button" name="btn2" id="btn2" value="TTS读音" onclick="tts2();">
  </form>
  <p></p>
<div style="float:left; width:100%;">
  <div id="result" style="float:left; width:80%; height:400; border:2px;">
    <iframe name="iframe" id="iframe" width="100%" height="400"> </iframe>
  </div>
  <div id="alist" style="float:right; width:20%; height:400; border:2px;">
  </div>
</div>
  
  <script type="text/javascript">
    $(function(){
      $("#btn1").click(function(){
        $.getJSON("/prefix?txt="+$("#txt").val(), function(data){
          var items = [];
          $.each(data, function(i, item){
            if (i<=20){
              items[i] = '<a href="/trans?txt=' +item+ '" target="iframe">' +item+ "</a><br>";
            }
          });
          var a = items.join('\n');
          if (a) $('#alist').html(a);
        })
      })
    });

    // TTS
    function tts() {
        var txt = document.getElementById('txt').value;
        if (txt.length >1) eel.py_speak(txt);
    }

    // 屏幕双击取词
    function tts2() {
        // 获取iframe里的选择内容
        var select = window.frames['iframe'].getSelection();
        var txt = select.toString();
        if (txt.length >1) eel.py_speak(txt);
        else tts();       
    }

  // 页面加载添加：监听iframe网页点击事件
  $(document).ready(function(){
    var listener = window.addEventListener('blur', function(){
      if (document.activeElement === document.getElementById('iframe')){
        $('iframe').contents().find('a.fayin').click(function(event){
          event.preventDefault();
          var a = $(this);
         if (a){
          var addr = a.attr('href');
          if (addr.indexOf('sound://')==0){
            var url = "/data" + addr.substring(7);
            var mp3 = new Audio(url);
            mp3.addEventListener("canplaythrough", (event)=> {
               mp3.play();
            });
          } else {
            alert('href='+addr);
          }
         }
        })
      }        
    });
  });
  </script> 
</body>
</html>

运行 python mdict_eel.py 

个人感觉：bottle + eel 比 pywebview + cef 要好用些。