亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用Python開發(fā)一個(gè)簡(jiǎn)單的本地圖片服務(wù)器

 更新時(shí)間:2025年04月08日 15:11:32   作者:winfredzhang  
本文介紹了如何結(jié)合wxPython構(gòu)建的圖形用戶界面GUI和Python內(nèi)建的 Web服務(wù)器功能,在本地網(wǎng)絡(luò)中搭建一個(gè)私人的,即開即用的網(wǎng)頁(yè)相冊(cè),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以嘗試一下

你是否曾經(jīng)想過(guò),如何能方便地將在電腦上存儲(chǔ)的照片,通過(guò)手機(jī)或平板在局域網(wǎng)內(nèi)快速瀏覽?今天介紹的這個(gè) Python 腳本就能幫你輕松實(shí)現(xiàn)!它巧妙地結(jié)合了 wxPython 構(gòu)建的圖形用戶界面(GUI)和 Python 內(nèi)建的 Web 服務(wù)器功能,讓你在本地網(wǎng)絡(luò)中搭建一個(gè)私人的、即開即用的網(wǎng)頁(yè)相冊(cè)。

讓我們一起深入代碼,看看它是如何一步步實(shí)現(xiàn)的。

項(xiàng)目目標(biāo)

這個(gè)腳本的核心目標(biāo)是:

  • 提供一個(gè)簡(jiǎn)單的桌面應(yīng)用程序,讓用戶可以選擇包含圖片的本地文件夾。
  • 啟動(dòng)一個(gè)本地 HTTP 服務(wù)器,該服務(wù)器能生成一個(gè)展示所選文件夾內(nèi)圖片縮略圖的 HTML 頁(yè)面。
  • 允許同一局域網(wǎng)內(nèi)的其他設(shè)備(如手機(jī)、平板)通過(guò)瀏覽器訪問(wèn)這個(gè) HTML 頁(yè)面。
  • 提供一個(gè)具備現(xiàn)代功能的網(wǎng)頁(yè)瀏覽界面,例如圖片懶加載、點(diǎn)擊縮略圖彈出大圖預(yù)覽、以及在大圖模式下切換圖片等。

核心技術(shù)棧

Python 3: 作為主要的編程語(yǔ)言。

wxPython: 一個(gè)跨平臺(tái)的 Python GUI 工具庫(kù),用于創(chuàng)建桌面應(yīng)用程序窗口。

http.server & socketserver: Python 標(biāo)準(zhǔn)庫(kù),用于創(chuàng)建基礎(chǔ)的 HTTP Web 服務(wù)器。

threading: 用于在后臺(tái)線程中運(yùn)行 HTTP 服務(wù)器,避免阻塞 GUI 界面。

socket: 用于獲取本機(jī)的局域網(wǎng) IP 地址。

os & pathlib: 用于文件系統(tǒng)操作(列出目錄、檢查文件、獲取路徑、大小等)。pathlib 被導(dǎo)入但實(shí)際未使用,代碼主要使用了 os.path。

webbrowser: 用于在腳本啟動(dòng)服務(wù)后自動(dòng)打開默認(rèn)瀏覽器訪問(wèn)頁(yè)面。

mimetypes: 用于猜測(cè)圖片文件的 MIME 類型(如 image/jpeg),以便瀏覽器正確顯示。

HTML, CSS, JavaScript: 用于構(gòu)建用戶在瀏覽器中看到的圖片瀏覽前端界面。

代碼深度解析

讓我們逐一拆解腳本的關(guān)鍵組成部分:

1. 導(dǎo)入模塊與全局變量

import wx
import os
import http.server
import socketserver
import threading
import socket
import webbrowser
from pathlib import Path # 導(dǎo)入但未使用
import mimetypes

# 全局變量,用于存儲(chǔ)選擇的圖片文件夾路徑
selected_folder = ""
server_thread = None
server_instance = None

腳本首先導(dǎo)入了所有必需的庫(kù)。

定義了三個(gè)全局變量:

  • selected_folder: 存儲(chǔ)用戶通過(guò) GUI 選擇的圖片文件夾路徑。
  • server_thread: 用于保存運(yùn)行 HTTP 服務(wù)器的線程對(duì)象。
  • server_instance: 用于保存實(shí)際的 TCPServer 服務(wù)器實(shí)例。

在這個(gè)場(chǎng)景下使用全局變量簡(jiǎn)化了狀態(tài)管理,但在更復(fù)雜的應(yīng)用中可能需要更精細(xì)的狀態(tài)管理機(jī)制。

2. 自定義 HTTP 請(qǐng)求處理器 (ImageHandler)

class ImageHandler(http.server.SimpleHTTPRequestHandler):
    def __init__(self, *args, **kwargs):
        # 確保每次請(qǐng)求都使用最新的文件夾路徑
        global selected_folder
        # 將directory參數(shù)傳遞給父類的__init__方法
        super().__init__(directory=selected_folder, *args, **kwargs)

    def do_GET(self):
        # ... (處理 "/" 根路徑請(qǐng)求,生成 HTML 頁(yè)面) ...
        # ... (處理 "/images/..." 圖片文件請(qǐng)求) ...
        # ... (處理其他路徑,返回 404) ...

這個(gè)類繼承自 http.server.SimpleHTTPRequestHandler,它提供了處理靜態(tài)文件請(qǐng)求的基礎(chǔ)功能。

__init__ (構(gòu)造函數(shù)): 這是個(gè)關(guān)鍵點(diǎn)。每次處理新的 HTTP 請(qǐng)求時(shí),這個(gè)構(gòu)造函數(shù)都會(huì)被調(diào)用。它會(huì)讀取當(dāng)前的 selected_folder 全局變量的值,并將其作為 directory 參數(shù)傳遞給父類的構(gòu)造函數(shù)。這意味著服務(wù)器始終從 GUI 中最新選擇的文件夾提供服務(wù)。(注意:當(dāng)前代碼邏輯下,用戶選擇新文件夾后需要重新點(diǎn)擊“啟動(dòng)服務(wù)器”按鈕才會(huì)生效)。

do_GET 方法: 這個(gè)方法負(fù)責(zé)處理所有傳入的 HTTP GET 請(qǐng)求。

請(qǐng)求根路徑 (/):

1.當(dāng)用戶訪問(wèn)服務(wù)器的根地址時(shí)(例如 http://<ip>:8000/),此部分代碼被執(zhí)行。

2.它會(huì)掃描 selected_folder 文件夾,找出所有具有常見圖片擴(kuò)展名(如 .jpg, .png, .gif 等)的文件。

3.計(jì)算每個(gè)圖片文件的大小(轉(zhuǎn)換為 MB 或 KB)。

4.按文件名對(duì)圖片列表進(jìn)行字母排序。

5.動(dòng)態(tài)生成一個(gè)完整的 HTML 頁(yè)面,頁(yè)面內(nèi)容包括:

CSS 樣式: 定義了頁(yè)面的外觀,包括響應(yīng)式的網(wǎng)格布局 (.gallery)、圖片容器樣式、用于大圖預(yù)覽的模態(tài)彈出框 (.modal)、導(dǎo)航按鈕、加載指示器以及圖片懶加載的淡入效果。

HTML 結(jié)構(gòu): 包含一個(gè)標(biāo)題 (<h1>)、一個(gè)加載進(jìn)度條 (<div>)、一個(gè)圖片畫廊區(qū)域 (<div class="gallery">),其中填充了每個(gè)圖片項(xiàng)(包含一個(gè) img 標(biāo)簽用于懶加載、圖片文件名和文件大?。?,以及模態(tài)框的 HTML 結(jié)構(gòu)。

JavaScript 腳本: 實(shí)現(xiàn)了前端的交互邏輯:

  • 圖片懶加載 (Lazy Loading): 利用現(xiàn)代瀏覽器的 IntersectionObserver API(并為舊瀏覽器提供后備方案),僅當(dāng)圖片滾動(dòng)到可視區(qū)域時(shí)才加載其 src,極大地提高了包含大量圖片時(shí)的初始頁(yè)面加載速度。同時(shí),還實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的加載進(jìn)度條。
  • 模態(tài)框預(yù)覽: 當(dāng)用戶點(diǎn)擊任意縮略圖時(shí),會(huì)彈出一個(gè)覆蓋全屏的模態(tài)框,顯示對(duì)應(yīng)的大圖。
  • 圖片導(dǎo)航: 在模態(tài)框中,用戶可以通過(guò)點(diǎn)擊“上一張”/“下一張”按鈕,或使用鍵盤的左右箭頭鍵來(lái)切換瀏覽圖片。按 Escape 鍵可以關(guān)閉模態(tài)框。
  • 圖片預(yù)加載: 在打開模態(tài)框顯示某張圖片時(shí),腳本會(huì)嘗試預(yù)加載其相鄰(上一張和下一張)的圖片,以提升導(dǎo)航切換時(shí)的流暢度。

6.最后,服務(wù)器將生成的 HTML 頁(yè)面內(nèi)容連同正確的 HTTP 頭部(Content-Type: text/html, Cache-Control 設(shè)置為緩存 1 小時(shí))發(fā)送給瀏覽器。

請(qǐng)求圖片路徑 (/images/...):

  • 當(dāng)瀏覽器請(qǐng)求的路徑以 /images/ 開頭時(shí)(這是 HTML 中 <img> 標(biāo)簽的 src 指向的路徑),服務(wù)器認(rèn)為它是在請(qǐng)求一個(gè)具體的圖片文件。
  • 代碼從路徑中提取出圖片文件名,并結(jié)合 selected_folder 構(gòu)建出完整的文件系統(tǒng)路徑。
  • 檢查該文件是否存在且確實(shí)是一個(gè)文件。
  • 使用 mimetypes.guess_type 來(lái)推斷文件的 MIME 類型(例如 image/jpeg),并為 PNG 和未知類型提供回退。
  • 將圖片文件的二進(jìn)制內(nèi)容讀取出來(lái),并連同相應(yīng)的 HTTP 頭部(Content-Type, Content-Length, Cache-Control 設(shè)置為緩存 1 天以提高性能, Accept-Ranges 表示支持范圍請(qǐng)求)發(fā)送給瀏覽器。

請(qǐng)求其他路徑:

對(duì)于所有其他無(wú)法識(shí)別的請(qǐng)求路徑,服務(wù)器返回 404 “File not found” 錯(cuò)誤。

3. 啟動(dòng)服務(wù)器函數(shù) (start_server)

def start_server(port=8000):
    global server_instance
    # 設(shè)置允許地址重用,解決端口被占用的問(wèn)題
    socketserver.TCPServer.allow_reuse_address = True
    # 創(chuàng)建服務(wù)器實(shí)例
    server_instance = socketserver.TCPServer(("", port), ImageHandler)
    server_instance.serve_forever()

這個(gè)函數(shù)被設(shè)計(jì)用來(lái)在一個(gè)單獨(dú)的線程中運(yùn)行。

socketserver.TCPServer.allow_reuse_address = True 是一個(gè)重要的設(shè)置,它允許服務(wù)器在關(guān)閉后立即重新啟動(dòng)時(shí)可以快速重用相同的端口,避免常見的“地址已被使用”錯(cuò)誤。

它創(chuàng)建了一個(gè) TCPServer 實(shí)例,監(jiān)聽本機(jī)的所有網(wǎng)絡(luò)接口 ("") 上的指定端口(默認(rèn)為 8000),并指定使用我們自定義的 ImageHandler 類來(lái)處理所有接收到的請(qǐng)求。

server_instance.serve_forever() 啟動(dòng)了服務(wù)器的主循環(huán),持續(xù)監(jiān)聽和處理連接請(qǐng)求,直到 shutdown() 方法被調(diào)用。

4. 獲取本機(jī) IP 函數(shù) (get_local_ip)

def get_local_ip():
    try:
        # 創(chuàng)建一個(gè)臨時(shí)套接字連接到外部地址,以獲取本機(jī)IP
        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        s.connect(("8.8.8.8", 80)) # 連接到一個(gè)公共地址(如谷歌DNS),無(wú)需實(shí)際發(fā)送數(shù)據(jù)
        ip = s.getsockname()[0]    # 獲取用于此連接的本地套接字地址
        s.close()
        return ip
    except:
        return "127.0.0.1"  # 如果獲取失敗,返回本地回環(huán)地址

這是一個(gè)實(shí)用工具函數(shù),用于查找運(yùn)行腳本的計(jì)算機(jī)在局域網(wǎng)中的 IP 地址。這對(duì)于告訴用戶(以及其他設(shè)備)應(yīng)該訪問(wèn)哪個(gè) URL 非常重要。

它使用了一個(gè)常用技巧:創(chuàng)建一個(gè) UDP 套接字,并嘗試“連接”(這并不會(huì)實(shí)際發(fā)送數(shù)據(jù))到一個(gè)已知的外部 IP 地址(例如 Google 的公共 DNS 服務(wù)器 8.8.8.8)。操作系統(tǒng)為了完成這個(gè)(虛擬的)連接,會(huì)確定應(yīng)該使用哪個(gè)本地 IP 地址,然后我們就可以通過(guò) getsockname() 獲取這個(gè)地址。

如果嘗試獲取 IP 失?。ɡ纾瑳]有網(wǎng)絡(luò)連接),它會(huì)回退到返回 127.0.0.1 (localhost)。

5. wxPython 圖形用戶界面 (PhotoServerApp, PhotoServerFrame)

PhotoServerApp (應(yīng)用程序類):

class PhotoServerApp(wx.App):
    def OnInit(self):
        self.frame = PhotoServerFrame("圖片服務(wù)器", (600, 400))
        self.frame.Show()
        return True

標(biāo)準(zhǔn)的 wx.App 子類。它的 OnInit 方法負(fù)責(zé)創(chuàng)建并顯示主應(yīng)用程序窗口 (PhotoServerFrame)。

PhotoServerFrame (主窗口類):

class PhotoServerFrame(wx.Frame):
    def __init__(self, title, size):
        # ... 創(chuàng)建界面控件 (文本框, 按鈕, 靜態(tài)文本) ...
        # ... 使用 wx.BoxSizer 進(jìn)行布局管理 ...
        # ... 綁定事件處理函數(shù) (on_browse, on_start_server, on_stop_server, on_close) ...
        # ... 初始化設(shè)置 (禁用停止按鈕, 顯示歡迎信息) ...

    def on_browse(self, event):
        # ... 彈出文件夾選擇對(duì)話框 (wx.DirDialog) ...
        # ... 更新全局變量 selected_folder 和界面上的文本框 ...

    def on_start_server(self, event):
        # ... 檢查是否已選擇文件夾 ...
        # ... 如果服務(wù)器已運(yùn)行,先停止舊的再啟動(dòng)新的(實(shí)現(xiàn)簡(jiǎn)單的重啟邏輯)...
        # ... 在新的后臺(tái)守護(hù)線程 (daemon thread) 中啟動(dòng)服務(wù)器 ...
        # ... 獲取本機(jī) IP, 更新界面按鈕狀態(tài), 在狀態(tài)區(qū)記錄日志, 自動(dòng)打開瀏覽器 ...
        # ... 包含基本的錯(cuò)誤處理 ...

    def on_stop_server(self, event):
        # ... 調(diào)用 server_instance.shutdown() 關(guān)閉服務(wù)器 ...
        # ... 等待服務(wù)器線程結(jié)束 (join) ...
        # ... 更新界面按鈕狀態(tài), 在狀態(tài)區(qū)記錄日志 ...

    def log_status(self, message):
        # ... 將消息追加到狀態(tài)顯示文本框 (self.status_txt) ...

    def on_close(self, event):
        # ... 綁定窗口關(guān)閉事件,確保退出程序前嘗試關(guān)閉服務(wù)器 ...
        # ... event.Skip() 允許默認(rèn)的窗口關(guān)閉行為繼續(xù)執(zhí)行 ...

這個(gè)類定義了應(yīng)用程序的主窗口。

__init__: 創(chuàng)建所有的可視化元素:一個(gè)只讀文本框顯示選定的文件夾路徑,“選擇文件夾” 按鈕,“啟動(dòng)服務(wù)器” 和 “停止服務(wù)器” 按鈕,以及一個(gè)多行只讀文本框用于顯示服務(wù)器狀態(tài)和日志信息。它還使用 wx.BoxSizer 來(lái)組織這些控件的布局,并綁定了按鈕點(diǎn)擊事件和窗口關(guān)閉事件到相應(yīng)的方法。初始時(shí),“停止服務(wù)器”按鈕是禁用的。

on_browse: 處理 “選擇文件夾” 按鈕的點(diǎn)擊事件。它會(huì)彈出一個(gè)標(biāo)準(zhǔn)的文件夾選擇對(duì)話框。如果用戶選擇了文件夾并確認(rèn),它會(huì)更新 selected_folder 全局變量,并將路徑顯示在界面文本框中,同時(shí)記錄一條日志。

on_start_server: 處理 “啟動(dòng)服務(wù)器” 按鈕的點(diǎn)擊事件。

  • 首先檢查用戶是否已經(jīng)選擇了文件夾。
  • 檢查服務(wù)器是否已在運(yùn)行。如果是,它會(huì)先嘗試 shutdown() 當(dāng)前服務(wù)器實(shí)例并等待線程結(jié)束,然后才啟動(dòng)新的服務(wù)器線程(提供了一種重啟服務(wù)的方式)。
  • 創(chuàng)建一個(gè)新的 threading.Thread 來(lái)運(yùn)行 start_server 函數(shù)。將線程設(shè)置為 daemon=True,這樣主程序退出時(shí),這個(gè)后臺(tái)線程也會(huì)自動(dòng)結(jié)束。
  • 調(diào)用 get_local_ip() 獲取本機(jī) IP。
  • 更新 GUI 按鈕的狀態(tài)(禁用“啟動(dòng)”和“選擇文件夾”,啟用“停止”)。
  • 在狀態(tài)文本框中打印服務(wù)器已啟動(dòng)、IP 地址、端口號(hào)以及供手機(jī)訪問(wèn)的 URL。
  • 使用 webbrowser.open() 自動(dòng)在用戶的默認(rèn)瀏覽器中打開服務(wù)器地址。
  • 包含了一個(gè) try...except 塊來(lái)捕獲并顯示啟動(dòng)過(guò)程中可能出現(xiàn)的錯(cuò)誤。

on_stop_server: 處理 “停止服務(wù)器” 按鈕的點(diǎn)擊事件。

  • 如果服務(wù)器實(shí)例存在 (server_instance 不為 None),調(diào)用 server_instance.shutdown() 來(lái)請(qǐng)求服務(wù)器停止。shutdown() 會(huì)使 serve_forever() 循環(huán)退出。
  • 等待服務(wù)器線程 (server_thread) 結(jié)束(使用 join() 并設(shè)置了短暫的超時(shí))。
  • 重置全局變量 server_instance 和 server_thread 為 None。
  • 更新 GUI 按鈕狀態(tài)(啟用“啟動(dòng)”和“選擇文件夾”,禁用“停止”)。
  • 記錄服務(wù)器已停止的日志。

log_status: 一個(gè)簡(jiǎn)單的輔助方法,將傳入的消息追加到狀態(tài)文本框 self.status_txt 中,并在末尾添加換行符。

on_close: 當(dāng)用戶點(diǎn)擊窗口的關(guān)閉按鈕時(shí)觸發(fā)。它會(huì)檢查服務(wù)器是否仍在運(yùn)行,如果是,則嘗試調(diào)用 shutdown() 來(lái)關(guān)閉服務(wù)器,以確保資源被正確釋放。

event.Skip() 允許 wxPython 繼續(xù)執(zhí)行默認(rèn)的窗口關(guān)閉流程。

6. 程序入口 (if __name__ == "__main__":)

if __name__ == "__main__":
    app = PhotoServerApp(False)
    app.MainLoop()

這是標(biāo)準(zhǔn)的 Python 腳本入口點(diǎn)。

它創(chuàng)建了 PhotoServerApp 的實(shí)例。

調(diào)用 app.MainLoop() 啟動(dòng)了 wxPython 的事件循環(huán)。這個(gè)循環(huán)會(huì)監(jiān)聽用戶的交互(如按鈕點(diǎn)擊、窗口關(guān)閉等)并分派事件給相應(yīng)的處理函數(shù),直到應(yīng)用程序退出。

完整代碼

# -*- coding: utf-8 -*-
# (在此處粘貼完整的 Python 代碼)
import wx
import os
import http.server
import socketserver
import threading
import socket
import webbrowser
from pathlib import Path # 實(shí)際未使用 os.path
import mimetypes

# 全局變量,用于存儲(chǔ)選擇的圖片文件夾路徑
selected_folder = ""
server_thread = None
server_instance = None

# 自定義HTTP請(qǐng)求處理器
class ImageHandler(http.server.SimpleHTTPRequestHandler):
    def __init__(self, *args, **kwargs):
        # 確保每次請(qǐng)求都使用最新的文件夾路徑
        global selected_folder
        # 將directory參數(shù)傳遞給父類的__init__方法
        # 注意:SimpleHTTPRequestHandler 在 Python 3.7+ 才接受 directory 參數(shù)
        # 如果在更早版本運(yùn)行,需要修改此處的實(shí)現(xiàn)方式(例如,在 do_GET 中處理路徑)
        super().__init__(directory=selected_folder, *args, **kwargs)

    def do_GET(self):
        # 使用 os.path.join 來(lái)確保路徑分隔符正確
        requested_path = os.path.normpath(self.translate_path(self.path))

        if self.path == "/":
            # 顯示圖片列表的主頁(yè)
            self.send_response(200)
            self.send_header("Content-type", "text/html; charset=utf-8") # 指定UTF-8編碼
            self.send_header("Cache-Control", "max-age=3600")  # 緩存1小時(shí),提高加載速度
            self.end_headers()

            # 獲取圖片文件列表
            image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
            image_files = []

            current_directory = self.directory # 使用 __init__ 中設(shè)置的目錄

            try:
                # 確保目錄存在
                if not os.path.isdir(current_directory):
                     self.wfile.write(f"錯(cuò)誤:目錄 '{current_directory}' 不存在或不是一個(gè)目錄。".encode('utf-8'))
                     return

                for file in os.listdir(current_directory):
                    file_path = os.path.join(current_directory, file)
                    if os.path.isfile(file_path) and os.path.splitext(file)[1].lower() in image_extensions:
                        # 獲取文件大小用于顯示預(yù)加載信息
                        try:
                             file_size = os.path.getsize(file_path) / (1024 * 1024)  # 轉(zhuǎn)換為MB
                             image_files.append((file, file_size))
                        except OSError as e:
                             self.log_error(f"獲取文件大小出錯(cuò): {file} - {str(e)}")


            except Exception as e:
                self.log_error(f"讀取目錄出錯(cuò): {current_directory} - {str(e)}")
                # 可以向?yàn)g覽器發(fā)送一個(gè)錯(cuò)誤信息
                self.wfile.write(f"讀取目錄時(shí)發(fā)生錯(cuò)誤: {str(e)}".encode('utf-8'))
                return

            # 按文件名排序 (考慮自然排序可能更好,如 '1.jpg', '2.jpg', '10.jpg')
            image_files.sort(key=lambda x: x[0].lower())

            # 生成HTML頁(yè)面
            # 使用 f-string 或模板引擎生成 HTML 會(huì)更清晰
            html_parts = []
            html_parts.append("""
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>圖片瀏覽</title>
                <style>
                    body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; }
                    h1 { color: #333; text-align: center; }
                    .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 15px; margin-top: 20px; }
                    .image-item { background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); overflow: hidden; } /* 添加 overflow hidden */
                    .image-container { width: 100%; padding-bottom: 75%; /* 4:3 aspect ratio */ position: relative; overflow: hidden; cursor: pointer; background-color: #eee; /* Placeholder color */ }
                    .image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Use cover for better thumbnail */ transition: transform 0.3s, opacity 0.3s; opacity: 0; /* Start hidden for lazy load */ }
                    .image-container img.lazy-loaded { opacity: 1; } /* Fade in when loaded */
                    .image-container:hover img { transform: scale(1.05); }
                    .image-info { padding: 8px 10px; } /* Group name and size */
                    .image-name { text-align: center; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 3px; }
                    .image-size { text-align: center; font-size: 11px; color: #666; }
                    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); }
                    .modal-content { display: block; max-width: 90%; max-height: 90%; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; }
                    .modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }
                    .modal-caption { color: white; position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 14px; }
                    .nav-button { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 30px; font-weight: bold; cursor: pointer; background: rgba(0,0,0,0.4); border-radius: 50%; width: 45px; height: 45px; text-align: center; line-height: 45px; user-select: none; transition: background 0.2s; }
                    .nav-button:hover { background: rgba(0,0,0,0.7); }
                    .prev { left: 15px; }
                    .next { right: 15px; }
                    .loading-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #4CAF50; z-index: 2000; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-out, opacity 0.5s 0.5s; /* Fade out after completion */ opacity: 1; }
                    .loading-indicator.hidden { opacity: 0; }
                    @media (max-width: 600px) {
                        .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Smaller thumbnails on mobile */ }
                        .nav-button { width: 40px; height: 40px; line-height: 40px; font-size: 25px; }
                        .modal-close { font-size: 30px; top: 10px; right: 20px; }
                    }
                </style>
            </head>
            <body>
                <h1>圖片瀏覽</h1>
                <div class="loading-indicator" id="loadingBar"></div>
                <div class="gallery" id="imageGallery">
            """)

            if not image_files:
                 html_parts.append("<p style='text-align:center; color: #555;'>未在此文件夾中找到圖片。</p>")


            # 使用 urllib.parse.quote 來(lái)編碼文件名,防止特殊字符問(wèn)題
            from urllib.parse import quote

            for idx, (image, size) in enumerate(image_files):
                # 顯示文件名和大小信息
                size_display = f"{size:.2f} MB" if size >= 1 else f"{size*1024:.1f} KB"
                # Encode the image filename for use in URL
                image_url_encoded = quote(image)
                html_parts.append(f"""
                    <div class="image-item" data-index="{idx}" data-src="/images/{image_url_encoded}" data-filename="{image.replace('"', '&quot;')}">
                        <div class="image-container">
                            <img class="lazy-image" data-src="/images/{image_url_encoded}" alt="{image.replace('"', '&quot;')}" loading="lazy">
                        </div>
                        <div class="image-info">
                            <div class="image-name" title="{image.replace('"', '&quot;')}">{image}</div>
                            <div class="image-size">{size_display}</div>
                        </div>
                    </div>
                """)

            html_parts.append("""
                </div>

                <div id="imageModal" class="modal">
                    <span class="modal-close" title="關(guān)閉 (Esc)">&times;</span>
                    <img class="modal-content" id="modalImage" alt="預(yù)覽圖片">
                    <div class="modal-caption" id="modalCaption"></div>
                    <div class="nav-button prev" id="prevButton" title="上一張 (←)">&#10094;</div>
                    <div class="nav-button next" id="nextButton" title="下一張 (→)">&#10095;</div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const lazyImages = document.querySelectorAll('.lazy-image');
                        const loadingBar = document.getElementById('loadingBar');
                        const imageGallery = document.getElementById('imageGallery');
                        const modal = document.getElementById('imageModal');
                        const modalImg = document.getElementById('modalImage');
                        const captionText = document.getElementById('modalCaption');
                        const prevButton = document.getElementById('prevButton');
                        const nextButton = document.getElementById('nextButton');
                        const closeButton = document.querySelector('.modal-close');

                        let loadedCount = 0;
                        let currentIndex = 0;
                        let allImageItems = []; // Will be populated after DOM ready

                        function updateLoadingBar() {
                            if (lazyImages.length === 0) {
                                loadingBar.style.transform = 'scaleX(1)';
                                setTimeout(() => { loadingBar.classList.add('hidden'); }, 500);
                                return;
                            }
                            const progress = Math.min(loadedCount / lazyImages.length, 1);
                            loadingBar.style.transform = `scaleX(${progress})`;
                            if (loadedCount >= lazyImages.length) {
                                setTimeout(() => { loadingBar.classList.add('hidden'); }, 500); // Hide after a short delay
                            }
                        }

                        // --- Lazy Loading ---
                        if ('IntersectionObserver' in window) {
                            const observerOptions = { rootMargin: '0px 0px 200px 0px' }; // Load images 200px before they enter viewport
                            const imageObserver = new IntersectionObserver((entries, observer) => {
                                entries.forEach(entry => {
                                    if (entry.isIntersecting) {
                                        const img = entry.target;
                                        img.src = img.dataset.src;
                                        img.onload = () => {
                                            img.classList.add('lazy-loaded');
                                            loadedCount++;
                                            updateLoadingBar();
                                        };
                                        img.onerror = () => {
                                            // Optionally handle image load errors
                                            img.alt = "圖片加載失敗";
                                            loadedCount++; // Still count it to finish loading bar
                                            updateLoadingBar();
                                        }
                                        observer.unobserve(img);
                                    }
                                });
                            }, observerOptions);
                            lazyImages.forEach(img => imageObserver.observe(img));
                        } else {
                            // Fallback for older browsers
                            lazyImages.forEach(img => {
                                img.src = img.dataset.src;
                                img.onload = () => {
                                     img.classList.add('lazy-loaded');
                                     loadedCount++;
                                     updateLoadingBar();
                                };
                                 img.onerror = () => { loadedCount++; updateLoadingBar(); }
                            });
                        }
                        updateLoadingBar(); // Initial call for case of 0 images

                        // --- Modal Logic ---
                        // Get all image items once DOM is ready
                        allImageItems = Array.from(document.querySelectorAll('.image-item'));

                        function preloadImage(index) {
                           if (index >= 0 && index < allImageItems.length) {
                                const img = new Image();
                                img.src = allImageItems[index].dataset.src;
                            }
                        }

                         function openModal(index) {
                            if (index < 0 || index >= allImageItems.length) return;
                            currentIndex = index;
                            const item = allImageItems[index];
                            const imgSrc = item.dataset.src;
                            const filename = item.dataset.filename;

                            modalImg.src = imgSrc; // Set src immediately
                            modalImg.alt = filename;
                            captionText.textContent = `${filename} (${index + 1}/${allImageItems.length})`; // Use textContent for security
                            modal.style.display = 'block';
                            document.body.style.overflow = 'hidden'; // Prevent background scrolling

                            // Preload adjacent images
                            preloadImage(index - 1);
                            preloadImage(index + 1);
                        }

                        function closeModal() {
                            modal.style.display = 'none';
                            modalImg.src = ""; // Clear src to stop loading/free memory
                            document.body.style.overflow = ''; // Restore background scrolling
                        }

                        function showPrevImage() {
                             const newIndex = (currentIndex - 1 + allImageItems.length) % allImageItems.length;
                             openModal(newIndex);
                        }

                         function showNextImage() {
                            const newIndex = (currentIndex + 1) % allImageItems.length;
                            openModal(newIndex);
                        }

                        // Event Listeners
                         imageGallery.addEventListener('click', function(e) {
                            const item = e.target.closest('.image-item');
                            if (item) {
                                const index = parseInt(item.dataset.index, 10);
                                openModal(index);
                            }
                        });

                        closeButton.addEventListener('click', closeModal);
                        prevButton.addEventListener('click', showPrevImage);
                        nextButton.addEventListener('click', showNextImage);

                        // Close modal if background is clicked
                         modal.addEventListener('click', function(e) {
                            if (e.target === modal) {
                                closeModal();
                            }
                        });

                        // Keyboard navigation
                         document.addEventListener('keydown', function(e) {
                            if (modal.style.display === 'block') {
                                if (e.key === 'ArrowLeft') {
                                    showPrevImage();
                                } else if (e.key === 'ArrowRight') {
                                    showNextImage();
                                } else if (e.key === 'Escape') {
                                    closeModal();
                                }
                            }
                        });
                    });
                </script>
            </body>
            </html>
            """)

            # Combine and send HTML
            full_html = "".join(html_parts)
            self.wfile.write(full_html.encode('utf-8')) # Ensure UTF-8 encoding

        # --- Serve Image Files ---
        # Check if the requested path seems like an image file request within our structure
        elif self.path.startswith("/images/"):
             # Decode the URL path component
             from urllib.parse import unquote
             try:
                 image_name = unquote(self.path[len("/images/"):])
             except Exception as e:
                 self.send_error(400, f"Bad image path encoding: {e}")
                 return

             # Construct the full path using the selected directory
             # Important: Sanitize image_name to prevent directory traversal attacks
             # os.path.join on its own is NOT enough if image_name contains '..' or starts with '/'
             image_path_unsafe = os.path.join(self.directory, image_name)

             # Basic sanitization: ensure the resolved path is still within the base directory
             base_dir_real = os.path.realpath(self.directory)
             image_path_real = os.path.realpath(image_path_unsafe)

             if not image_path_real.startswith(base_dir_real):
                 self.send_error(403, "Forbidden: Path traversal attempt?")
                 return

             if os.path.exists(image_path_real) and os.path.isfile(image_path_real):
                 try:
                     # Get MIME type
                     content_type, _ = mimetypes.guess_type(image_path_real)
                     if content_type is None:
                         # Guess common types again or default
                          ext = os.path.splitext(image_name)[1].lower()
                          if ext == '.png': content_type = 'image/png'
                          elif ext in ['.jpg', '.jpeg']: content_type = 'image/jpeg'
                          elif ext == '.gif': content_type = 'image/gif'
                          elif ext == '.webp': content_type = 'image/webp'
                          else: content_type = 'application/octet-stream'

                     # Get file size
                     file_size = os.path.getsize(image_path_real)

                     # Send headers
                     self.send_response(200)
                     self.send_header('Content-type', content_type)
                     self.send_header('Content-Length', str(file_size))
                     self.send_header('Cache-Control', 'max-age=86400')  # Cache for 1 day
                     self.send_header('Accept-Ranges', 'bytes') # Indicate support for range requests
                     self.end_headers()

                     # Send file content
                     with open(image_path_real, 'rb') as file:
                         # Simple send - for large files consider shutil.copyfileobj
                         self.wfile.write(file.read())

                 except IOError as e:
                      self.log_error(f"IOError serving file: {image_path_real} - {str(e)}")
                      self.send_error(500, f"Error reading file: {str(e)}")
                 except Exception as e:
                      self.log_error(f"Error serving file: {image_path_real} - {str(e)}")
                      self.send_error(500, f"Server error serving file: {str(e)}")
             else:
                 self.send_error(404, "Image not found")
        else:
            # For any other path, let the base class handle it (or send 404)
            # super().do_GET() # If you want base class behavior for other files
            self.send_error(404, "File not found") # Or just send 404 directly

# 啟動(dòng)HTTP服務(wù)器
def start_server(port=8000):
    global server_instance
    # 設(shè)置允許地址重用,解決端口被占用的問(wèn)題
    socketserver.TCPServer.allow_reuse_address = True
    try:
        # 創(chuàng)建服務(wù)器實(shí)例
        server_instance = socketserver.TCPServer(("", port), ImageHandler)
        print(f"服務(wù)器啟動(dòng)于端口 {port}...")
        server_instance.serve_forever()
        print("服務(wù)器已停止。") # This line will be reached after shutdown()
    except OSError as e:
         print(f"!!! 啟動(dòng)服務(wù)器失敗(端口 {port}): {e}")
         # Optionally notify the GUI thread here if needed
         # wx.CallAfter(frame.notify_server_start_failed, str(e))
         server_instance = None # Ensure instance is None if failed
    except Exception as e:
         print(f"!!! 啟動(dòng)服務(wù)器時(shí)發(fā)生意外錯(cuò)誤: {e}")
         server_instance = None


# 獲取本機(jī)IP地址
def get_local_ip():
    ip = "127.0.0.1" # Default fallback
    try:
        # Create a socket object
        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        # Doesn't need to be reachable
        s.connect(("8.8.8.8", 80))
        ip = s.getsockname()[0]
        s.close()
    except Exception as e:
        print(f"無(wú)法自動(dòng)獲取本機(jī)IP: {e},將使用 {ip}")
    return ip

# 主應(yīng)用程序類
class PhotoServerApp(wx.App):
    def OnInit(self):
        # SetAppName helps with some platform integrations
        self.SetAppName("PhotoServer")
        self.frame = PhotoServerFrame(None, title="本地圖片服務(wù)器", size=(650, 450)) # Slightly larger window
        self.frame.Show()
        return True

# 主窗口類
class PhotoServerFrame(wx.Frame):
    def __init__(self, parent, title, size):
        super().__init__(parent, title=title, size=size)

        # 創(chuàng)建面板
        self.panel = wx.Panel(self)

        # 創(chuàng)建控件
        folder_label = wx.StaticText(self.panel, label="圖片文件夾:")
        self.folder_txt = wx.TextCtrl(self.panel, style=wx.TE_READONLY | wx.BORDER_STATIC) # Use static border
        self.browse_btn = wx.Button(self.panel, label="選擇文件夾(&B)...", id=wx.ID_OPEN) # Use standard ID and mnemonic
        self.start_btn = wx.Button(self.panel, label="啟動(dòng)服務(wù)(&S)")
        self.stop_btn = wx.Button(self.panel, label="停止服務(wù)(&T)")
        status_label = wx.StaticText(self.panel, label="服務(wù)器狀態(tài):")
        self.status_txt = wx.TextCtrl(self.panel, style=wx.TE_MULTILINE | wx.TE_READONLY | wx.HSCROLL | wx.BORDER_THEME) # Add scroll and theme border

        # 設(shè)置停止按鈕初始狀態(tài)為禁用
        self.stop_btn.Disable()

        # 綁定事件
        self.Bind(wx.EVT_BUTTON, self.on_browse, self.browse_btn)
        self.Bind(wx.EVT_BUTTON, self.on_start_server, self.start_btn)
        self.Bind(wx.EVT_BUTTON, self.on_stop_server, self.stop_btn)
        self.Bind(wx.EVT_CLOSE, self.on_close)

        # --- 使用 Sizers 進(jìn)行布局 ---
        # 主垂直 Sizer
        main_sizer = wx.BoxSizer(wx.VERTICAL)

        # 文件夾選擇行 (水平 Sizer)
        folder_sizer = wx.BoxSizer(wx.HORIZONTAL)
        folder_sizer.Add(folder_label, 0, wx.ALIGN_CENTER_VERTICAL | wx.RIGHT, 5)
        folder_sizer.Add(self.folder_txt, 1, wx.EXPAND | wx.RIGHT, 5) # 讓文本框擴(kuò)展
        folder_sizer.Add(self.browse_btn, 0, wx.ALIGN_CENTER_VERTICAL)
        main_sizer.Add(folder_sizer, 0, wx.EXPAND | wx.ALL, 10) # Add padding around this row

        # 控制按鈕行 (水平 Sizer) - 居中
        buttons_sizer = wx.BoxSizer(wx.HORIZONTAL)
        buttons_sizer.Add(self.start_btn, 0, wx.RIGHT, 5)
        buttons_sizer.Add(self.stop_btn, 0)
        main_sizer.Add(buttons_sizer, 0, wx.ALIGN_CENTER | wx.BOTTOM, 10) # Center align and add bottom margin

        # 狀態(tài)標(biāo)簽和文本框
        main_sizer.Add(status_label, 0, wx.LEFT | wx.RIGHT | wx.TOP, 10)
        main_sizer.Add(self.status_txt, 1, wx.EXPAND | wx.LEFT | wx.RIGHT | wx.BOTTOM, 10) # Let status text expand

        # 設(shè)置面板 Sizer 并適應(yīng)窗口
        self.panel.SetSizer(main_sizer)
        self.panel.Layout()
        # self.Fit() # Optional: Adjust window size to fit content initially

        # 居中顯示窗口
        self.Centre(wx.BOTH) # Center on screen

        # 顯示初始信息
        self.log_status("歡迎使用圖片服務(wù)器!請(qǐng)選擇一個(gè)包含圖片的文件夾,然后啟動(dòng)服務(wù)器。")

    def on_browse(self, event):
        # 彈出文件夾選擇對(duì)話框
        # Use the current value as the default path if available
        default_path = self.folder_txt.GetValue() if self.folder_txt.GetValue() else os.getcwd()
        dialog = wx.DirDialog(self, "選擇圖片文件夾", defaultPath=default_path,
                              style=wx.DD_DEFAULT_STYLE | wx.DD_DIR_MUST_EXIST | wx.DD_CHANGE_DIR)

        if dialog.ShowModal() == wx.ID_OK:
            global selected_folder
            new_folder = dialog.GetPath()
            # Only update if the folder actually changed
            if new_folder != selected_folder:
                 selected_folder = new_folder
                 self.folder_txt.SetValue(selected_folder)
                 self.log_status(f"已選擇文件夾: {selected_folder}")
                 # If server is running, maybe prompt user to restart?
                 # Or automatically enable start button if it was disabled due to no folder?
                 if not self.start_btn.IsEnabled() and not (server_thread and server_thread.is_alive()):
                      self.start_btn.Enable()

        dialog.Destroy()

    def on_start_server(self, event):
        global server_thread, selected_folder, server_instance

        # 檢查是否已選擇文件夾
        if not selected_folder or not os.path.isdir(selected_folder):
            wx.MessageBox("請(qǐng)先選擇一個(gè)有效的圖片文件夾!", "錯(cuò)誤", wx.OK | wx.ICON_ERROR, self)
            return

        # 檢查服務(wù)器是否已經(jīng)在運(yùn)行 (更可靠的方式是檢查 server_instance)
        if server_instance is not None and server_thread is not None and server_thread.is_alive():
            self.log_status("服務(wù)器已經(jīng)在運(yùn)行中。請(qǐng)先停止。")
            # wx.MessageBox("服務(wù)器已經(jīng)在運(yùn)行中。如果需要使用新文件夾,請(qǐng)先停止。", "提示", wx.OK | wx.ICON_INFORMATION, self)
            return # Don't restart automatically here, let user stop first

        port = 8000 # You might want to make this configurable
        self.log_status(f"正在嘗試啟動(dòng)服務(wù)器在端口 {port}...")

        try:
            # 清理舊線程引用 (以防萬(wàn)一)
            if server_thread and not server_thread.is_alive():
                server_thread = None

            # 創(chuàng)建并啟動(dòng)服務(wù)器線程
            # Pass the frame or a callback mechanism if start_server needs to report failure back to GUI
            server_thread = threading.Thread(target=start_server, args=(port,), daemon=True)
            server_thread.start()

            # --- 短暫等待,看服務(wù)器是否啟動(dòng)成功 ---
            # 這是一種簡(jiǎn)單的方法,更健壯的是使用事件或隊(duì)列從線程通信
            threading.Timer(0.5, self.check_server_status_after_start, args=(port,)).start()


        except Exception as e:
            self.log_status(f"!!! 啟動(dòng)服務(wù)器線程時(shí)出錯(cuò): {str(e)}")
            wx.MessageBox(f"啟動(dòng)服務(wù)器線程時(shí)出錯(cuò): {str(e)}", "嚴(yán)重錯(cuò)誤", wx.OK | wx.ICON_ERROR, self)


    def check_server_status_after_start(self, port):
        # This runs in a separate thread (from Timer), use wx.CallAfter to update GUI
        global server_instance
        if server_instance is not None:
            ip_address = get_local_ip()
            url = f"http://{ip_address}:{port}"

            def update_gui_success():
                self.log_status("服務(wù)器已成功啟動(dòng)!")
                self.log_status(f"本機(jī) IP 地址: {ip_address}")
                self.log_status(f"端口: {port}")
                self.log_status(f"請(qǐng)?jiān)跒g覽器中訪問(wèn): {url}")
                self.start_btn.Disable()
                self.stop_btn.Enable()
                self.browse_btn.Disable() # Disable browse while running
                try:
                    webbrowser.open(url)
                except Exception as wb_e:
                     self.log_status(f"自動(dòng)打開瀏覽器失敗: {wb_e}")

            wx.CallAfter(update_gui_success)
        else:
             def update_gui_failure():
                  self.log_status("!!! 服務(wù)器未能成功啟動(dòng),請(qǐng)檢查端口是否被占用或查看控制臺(tái)輸出。")
                  # Ensure buttons are in correct state if start failed
                  self.start_btn.Enable()
                  self.stop_btn.Disable()
                  self.browse_btn.Enable()
             wx.CallAfter(update_gui_failure)


    def on_stop_server(self, event):
        global server_thread, server_instance

        if server_instance:
            self.log_status("正在停止服務(wù)器...")
            try:
                # Shutdown must be called from a different thread than serve_forever
                # So, start a small thread just to call shutdown
                def shutdown_server():
                    try:
                        server_instance.shutdown() # Request shutdown
                        # server_instance.server_close() # Close listening socket immediately
                    except Exception as e:
                        # Use CallAfter to log from this thread
                        wx.CallAfter(self.log_status, f"關(guān)閉服務(wù)器時(shí)出錯(cuò): {e}")

                shutdown_thread = threading.Thread(target=shutdown_server)
                shutdown_thread.start()
                shutdown_thread.join(timeout=2.0) # Wait briefly for shutdown command

                # Now wait for the main server thread to exit
                if server_thread:
                    server_thread.join(timeout=2.0) # Wait up to 2 seconds
                    if server_thread.is_alive():
                         self.log_status("警告:服務(wù)器線程未能及時(shí)停止。")
                    server_thread = None

                server_instance = None # Mark as stopped

                # Update UI
                self.start_btn.Enable()
                self.stop_btn.Disable()
                self.browse_btn.Enable()
                self.log_status("服務(wù)器已停止!")

            except Exception as e:
                self.log_status(f"!!! 停止服務(wù)器時(shí)發(fā)生錯(cuò)誤: {str(e)}")
                # Attempt to force button state reset even if error occurred
                self.start_btn.Enable()
                self.stop_btn.Disable()
                self.browse_btn.Enable()
        else:
            self.log_status("服務(wù)器當(dāng)前未運(yùn)行。")
            # Ensure button states are correct if already stopped
            self.start_btn.Enable()
            self.stop_btn.Disable()
            self.browse_btn.Enable()


    def log_status(self, message):
        # Ensure UI updates happen on the main thread
        def append_text():
            # Optional: Add timestamp
            # import datetime
            # timestamp = datetime.datetime.now().strftime("%H:%M:%S")
            # self.status_txt.AppendText(f"[{timestamp}] {message}\n")
             self.status_txt.AppendText(f"{message}\n")
             self.status_txt.SetInsertionPointEnd() # Scroll to end
        # If called from background thread, use CallAfter
        if wx.IsMainThread():
             append_text()
        else:
             wx.CallAfter(append_text)

    def on_close(self, event):
        # 關(guān)閉窗口時(shí)確保服務(wù)器也被關(guān)閉
        if server_instance and server_thread and server_thread.is_alive():
            msg_box = wx.MessageDialog(self, "服務(wù)器仍在運(yùn)行。是否停止服務(wù)器并退出?", "確認(rèn)退出",
                                       wx.YES_NO | wx.CANCEL | wx.ICON_QUESTION)
            result = msg_box.ShowModal()
            msg_box.Destroy()

            if result == wx.ID_YES:
                self.on_stop_server(None) # Call stop logic
                # Check again if stop succeeded before destroying
                if server_instance is None:
                    self.Destroy() # Proceed with close
                else:
                    wx.MessageBox("無(wú)法完全停止服務(wù)器,請(qǐng)手動(dòng)檢查。", "警告", wx.OK | wx.ICON_WARNING, self)
                    # Don't destroy if stop failed, let user retry maybe
            elif result == wx.ID_NO:
                 self.Destroy() # Exit without stopping server (daemon thread will die)
            else: # wx.ID_CANCEL
                # Don't close the window
                if event.CanVeto():
                     event.Veto() # Stop the close event
        else:
            # Server not running, just exit cleanly
             self.Destroy() # Explicitly destroy frame


if __name__ == "__main__":
    # Ensure we handle high DPI displays better if possible
    try:
        # This might need adjustment based on wxPython version and OS
        if hasattr(wx, 'EnableAsserts'): wx.EnableAsserts(False) # Optional: Disable asserts for release
        # Some systems might need this for High DPI scaling:
        # if hasattr(wx, 'App'): wx.App.SetThreadSafety(wx.APP_THREAD_SAFETY_NONE)
        # if 'wxMSW' in wx.PlatformInfo:
        #     import ctypes
        #     try:
        #         ctypes.windll.shcore.SetProcessDpiAwareness(1) # Try for Win 8.1+
        #     except Exception:
        #         try:
        #              ctypes.windll.user32.SetProcessDPIAware() # Try for older Windows
        #         except Exception: pass
         pass # Keep it simple for now
    except Exception as e:
        print(f"無(wú)法設(shè)置 DPI 感知: {e}")

    app = PhotoServerApp(redirect=False) # redirect=False for easier debugging output
    app.MainLoop()

工作流程

用戶使用這個(gè)工具的典型流程如下:

  • 運(yùn)行 Python 腳本。
  • 出現(xiàn)一個(gè)帶有 “圖片服務(wù)器” 標(biāo)題的窗口。
  • 點(diǎn)擊 “選擇文件夾” 按鈕,在彈出的對(duì)話框中找到并選擇一個(gè)包含圖片的文件夾。
  • 選中的文件夾路徑會(huì)顯示在文本框中。
  • 點(diǎn)擊 “啟動(dòng)服務(wù)器” 按鈕。
  • 腳本獲取本機(jī) IP 地址,在后臺(tái)啟動(dòng) HTTP 服務(wù)器。
  • 狀態(tài)日志區(qū)域會(huì)顯示服務(wù)器已啟動(dòng)、本機(jī) IP 地址和端口號(hào)(通常是 8000),并提示用戶可以通過(guò) http://<本機(jī)IP>:8000 訪問(wèn)。
  • 腳本會(huì)自動(dòng)打開系統(tǒng)的默認(rèn)瀏覽器,并訪問(wèn)上述地址。
  • 瀏覽器中會(huì)顯示一個(gè)包含所選文件夾中所有圖片縮略圖的網(wǎng)頁(yè)。圖片會(huì)隨著滾動(dòng)懶加載。
  • 用戶可以在瀏覽器中滾動(dòng)瀏覽縮略圖。
  • 點(diǎn)擊任意縮略圖,會(huì)彈出一個(gè)大圖預(yù)覽模態(tài)框。
  • 在模態(tài)框中,可以使用左右箭頭或點(diǎn)擊兩側(cè)按鈕切換圖片。
  • 在桌面應(yīng)用程序窗口中,點(diǎn)擊 “停止服務(wù)器” 可以關(guān)閉后臺(tái)服務(wù)。
  • 關(guān)閉桌面應(yīng)用程序窗口時(shí),后臺(tái)服務(wù)也會(huì)自動(dòng)嘗試停止。

主要功能與優(yōu)勢(shì)

簡(jiǎn)單易用: 提供圖形界面,操作直觀。

本地網(wǎng)絡(luò)共享: 輕松將電腦上的圖片共享給局域網(wǎng)內(nèi)的手機(jī)、平板等設(shè)備瀏覽。

無(wú)需安裝額外服務(wù)器軟件: 利用 Python 內(nèi)建庫(kù),綠色便攜。

跨平臺(tái)潛力: Python 和 wxPython 都是跨平臺(tái)的,理論上可以在 Windows, macOS, Linux 上運(yùn)行(需安裝相應(yīng)依賴)。

現(xiàn)代化的 Web 界面: 提供了懶加載、模態(tài)預(yù)覽、鍵盤導(dǎo)航等功能,提升了瀏覽體驗(yàn)。

性能考慮: 通過(guò)懶加載和 HTTP 緩存(針對(duì)圖片文件設(shè)置了 1 天緩存,HTML 頁(yè)面 1 小時(shí)緩存)來(lái)優(yōu)化性能。

潛在改進(jìn)與思考

雖然這個(gè)腳本已經(jīng)相當(dāng)實(shí)用,但仍有一些可以改進(jìn)的地方:

更健壯的錯(cuò)誤處理: 對(duì)文件讀取、網(wǎng)絡(luò)錯(cuò)誤等進(jìn)行更細(xì)致的處理和用戶反饋。

安全性: 目前服務(wù)器對(duì)局域網(wǎng)內(nèi)的所有設(shè)備開放,沒有任何訪問(wèn)控制。對(duì)于敏感圖片,可能需要添加密碼驗(yàn)證等安全措施。

處理超大目錄: 如果文件夾包含成千上萬(wàn)張圖片,一次性讀取所有文件名和大小可能仍然會(huì)造成短暫卡頓,可以考慮分批加載或更優(yōu)化的目錄掃描方式。

可配置端口: 將端口號(hào) 8000 硬編碼在了代碼中,可以將其改為用戶可在界面上配置或通過(guò)命令行參數(shù)指定。

支持更多文件類型: 目前只處理了常見的圖片格式,可以擴(kuò)展支持視頻預(yù)覽或其他媒體類型。

異步服務(wù)器: 對(duì)于高并發(fā)場(chǎng)景(雖然在本應(yīng)用中不太可能),可以考慮使用基于 asyncio 的 Web 框架(如 aiohttp, FastAPI 等)代替 socketserver,以獲得更好的性能。

界面美化: wxPython 界面和 HTML 界面都可以進(jìn)一步美化。

運(yùn)行結(jié)果

總結(jié)

這個(gè) Python 腳本是一個(gè)非常實(shí)用的小工具,它完美地結(jié)合了桌面 GUI 的易用性和 Web 技術(shù)的靈活性,為在本地網(wǎng)絡(luò)中快速瀏覽電腦上的圖片提供了一個(gè)優(yōu)雅的解決方案。代碼結(jié)構(gòu)清晰,功能完善,并且展示了 Python 在快速開發(fā)網(wǎng)絡(luò)應(yīng)用方面的強(qiáng)大能力。無(wú)論你是想學(xué)習(xí) GUI 編程、網(wǎng)絡(luò)服務(wù),還是僅僅需要這樣一個(gè)方便的工具,這個(gè)項(xiàng)目都值得一看。

以上就是使用Python開發(fā)一個(gè)簡(jiǎn)單的本地圖片服務(wù)器的詳細(xì)內(nèi)容,更多關(guān)于Python本地圖片服務(wù)器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 用Python實(shí)現(xiàn)數(shù)據(jù)篩選與匹配實(shí)例

    用Python實(shí)現(xiàn)數(shù)據(jù)篩選與匹配實(shí)例

    大家好,本篇文章主要講的是用Python實(shí)現(xiàn)數(shù)據(jù)篩選與匹配實(shí)例,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下
    2022-02-02
  • Python檢測(cè)QQ在線狀態(tài)的方法

    Python檢測(cè)QQ在線狀態(tài)的方法

    這篇文章主要介紹了Python檢測(cè)QQ在線狀態(tài)的方法,涉及Python通過(guò)第三方平臺(tái)檢測(cè)QQ在線狀態(tài)的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-05-05
  • Python實(shí)現(xiàn)圖片拼接的代碼

    Python實(shí)現(xiàn)圖片拼接的代碼

    本文通過(guò)實(shí)例代碼給大家介紹了python實(shí)現(xiàn)圖片拼接的方法,非常不錯(cuò),具有一定的參考借鑒借鑒價(jià)值,需要的朋友參考下吧
    2018-07-07
  • Python爬取國(guó)外天氣預(yù)報(bào)網(wǎng)站的方法

    Python爬取國(guó)外天氣預(yù)報(bào)網(wǎng)站的方法

    這篇文章主要介紹了Python爬取國(guó)外天氣預(yù)報(bào)網(wǎng)站的方法,可實(shí)現(xiàn)抓取國(guó)外天氣預(yù)報(bào)信息的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-07-07
  • python?playwrigh框架入門安裝使用

    python?playwrigh框架入門安裝使用

    這篇文章主要為大家介紹了python?playwrigh框架入門的安裝使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Python實(shí)例方法、類方法、靜態(tài)方法區(qū)別詳解

    Python實(shí)例方法、類方法、靜態(tài)方法區(qū)別詳解

    這篇文章主要介紹了Python實(shí)例方法、類方法、靜態(tài)方法區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-09-09
  • python實(shí)現(xiàn)對(duì)excel表中的某列數(shù)據(jù)進(jìn)行排序的代碼示例

    python實(shí)現(xiàn)對(duì)excel表中的某列數(shù)據(jù)進(jìn)行排序的代碼示例

    這篇文章主要給大家介紹了如何使用python實(shí)現(xiàn)對(duì)excel表中的某列數(shù)據(jù)進(jìn)行排序,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下
    2023-11-11
  • Python異步發(fā)送日志到遠(yuǎn)程服務(wù)器詳情

    Python異步發(fā)送日志到遠(yuǎn)程服務(wù)器詳情

    這篇文章主要介紹了Python異步發(fā)送日志到遠(yuǎn)程服務(wù)器詳情,文章通過(guò)簡(jiǎn)單輸出到cmd和文件中的代碼展開詳情,需要的朋友可以參考一下
    2022-07-07
  • python實(shí)現(xiàn)下載整個(gè)ftp目錄的方法

    python實(shí)現(xiàn)下載整個(gè)ftp目錄的方法

    這篇文章主要介紹了python實(shí)現(xiàn)下載整個(gè)ftp目錄的方法,文中給出了詳細(xì)的示例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友可以一起來(lái)學(xué)習(xí)學(xué)習(xí)。
    2017-01-01
  • python+flask編寫接口實(shí)例詳解

    python+flask編寫接口實(shí)例詳解

    這篇文章主要介紹了python+flask編寫接口實(shí)例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05

最新評(píng)論