File size: 7,057 Bytes
0274490
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e6fa2f1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0274490
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
126
127
128
import gradio as gr


def get_readme_content():
    readme_html = """
    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px;">
        <h1 style="color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px;">πŸ“± VLM Chat Helper - Download</h1>

        <p style="font-size: 16px; color: #34495e; background-color: #ecf0f1; padding: 15px; border-radius: 8px; border-left: 4px solid #3498db;">
            A desktop assistant designed for the GLM series multimodal models (GLM-4.5V, compatible with GLM-4.1V), supporting interactive conversations with text, images, videos, PDFs, PPTs, and more. It connects to the GLM multimodal API to enable intelligent services across various scenarios.
        </p>

        <h2 style="color: #e74c3c; margin-top: 30px;">⚠️ Special Notes</h2>
        <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 15px; margin: 15px 0;">
            <p style="margin: 0; color: #856404;">
                <strong>The current version only supports macOS Apple Silicon (M-series chips: M1/M2/M3, etc.)</strong><br>
                Versions for Intel Macs, Windows, and Linux are not currently available.
            </p>
        </div>

        <h2 style="color: #27ae60; margin-top: 30px;">✨ Main Features</h2>
        <div style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.08);">
            <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef;">
                <span style="font-size: 20px; margin-right: 15px;">πŸ€–</span>
                <div>
                    <strong style="color: #495057;">Multimodal Chat:</strong> 
                    <span style="color: #6c757d;">Supports intelligent conversations with text, images, videos, PDFs, and PPT files</span>
                </div>
            </div>
            <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef;">
                <span style="font-size: 20px; margin-right: 15px;">πŸ“Έ</span>
                <div>
                    <strong style="color: #495057;">Screenshot:</strong> 
                    <span style="color: #6c757d;">Quick full/region screenshots with a global hotkey</span>
                </div>
            </div>
            <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef;">
                <span style="font-size: 20px; margin-right: 15px;">πŸŽ₯</span>
                <div>
                    <strong style="color: #495057;">Screen Recording:</strong> 
                    <span style="color: #6c757d;">Full-screen and region recording with automatic video compression</span>
                </div>
            </div>
            <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef;">
                <span style="font-size: 20px; margin-right: 15px;">πŸͺŸ</span>
                <div>
                    <strong style="color: #495057;">Floating Window Mode:</strong> 
                    <span style="color: #6c757d;">Compact floating chat window for use anytime, anywhere</span>
                </div>
            </div>
            <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef;">
                <span style="font-size: 20px; margin-right: 15px;">🎨</span>
                <div>
                    <strong style="color: #495057;">Themes:</strong> 
                    <span style="color: #6c757d;">Multiple built-in code highlighting themes</span>
                </div>
            </div>
            <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef;">
                <span style="font-size: 20px; margin-right: 15px;">πŸ“±</span>
                <div>
                    <strong style="color: #495057;">Drag-and-Drop Upload:</strong> 
                    <span style="color: #6c757d;">Drag files directly into the chat interface</span>
                </div>
            </div>
            <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef;">
                <span style="font-size: 20px; margin-right: 15px;">⌨️</span>
                <div>
                    <strong style="color: #495057;">Hotkeys:</strong> 
                    <span style="color: #6c757d;">Rich set of global hotkeys</span>
                </div>
            </div>
            <div style="display: flex; align-items: center; padding: 12px 0;">
                <span style="font-size: 20px; margin-right: 15px;">πŸ’Ύ</span>
                <div>
                    <strong style="color: #495057;">Local Storage:</strong> 
                    <span style="color: #6c757d;">Chat history stored in a local database</span>
                </div>
            </div>
        </div>

        <div style="background-color: #ffeaa7; border: 2px solid #fdcb6e; border-radius: 12px; padding: 20px; margin: 30px 0;">
            <h3 style="color: #2d3436; margin-top: 0; margin-bottom: 15px; text-align: center;">
                βš™οΈ Important Setup Instructions
            </h3>
            <p style="color: #636e72; margin-bottom: 10px; font-weight: 500;">
                Before using the application, please run the following command in Terminal:
            </p>
            <div style="background-color: #2d3436; color: #00ff00; padding: 15px; border-radius: 6px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 14px; margin: 15px 0; border: 1px solid #555;">
                xattr -rd com.apple.quarantine /Applications/vlm-helper.app
            </div>
            <p style="color: #636e72; font-size: 14px; margin: 0;">
                <em>This command removes the quarantine attribute to allow the app to run properly on macOS.</em>
            </p>
        </div>

        <div style="background-color: #d4edda; border: 2px solid #28a745; border-radius: 12px; padding: 20px; margin: 30px 0; text-align: center;">
            <p style="font-size: 18px; color: #155724; margin: 0;">
                πŸ“₯ Download: Find <strong>vlm-helper-1.0.6.dmg</strong> in this repository.
            </p>
        </div>
    </div>
    """
    return readme_html


def create_interface():
    """Create the Gradio interface"""
    with gr.Blocks(
            title="VLM Chat Helper - README",
            theme=gr.themes.Soft(),
            css="""
            .container {
                max-width: 900px !important;
                margin: 0 auto !important;
            }
            .gradio-container {
                min-height: 100vh;
            }
            """
    ) as demo:
        gr.HTML(get_readme_content())

    return demo


if __name__ == "__main__":
    demo = create_interface()
    demo.launch()