Hugging Face's logo

Spaces:
AUXteam
/
Maxun
Paused

App Files Community
Maxun
File size: 5,269 Bytes
6e38ce1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magentic-UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-light.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #ffffff;
        }
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 45px;
        }
        @media (max-width: 767px) {
            .markdown-body {
                padding: 15px;
            }
        }
        .loading {
            text-align: center;
            padding: 50px;
            color: #666;
        }
        .error {
            text-align: center;
            padding: 50px;
            color: #d73a49;
        }
        /* GitHub-style header */
        .header {
            background-color: #24292f;
            color: white;
            padding: 16px 0;
            margin-bottom: 32px;
        }
        .header-content {
            max-width: 980px;
            margin: 0 auto;
            padding: 0 45px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .header h1 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }
        .header a {
            color: #7d8590;
            text-decoration: none;
        }
        .header a:hover {
            color: white;
        }
        @media (max-width: 767px) {
            .header-content {
                padding: 0 15px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <h1>Magentic-UI</h1>
            <span>•</span>
            <a href="https://github.com/microsoft/magentic-ui">View on GitHub</a>
            <span>•</span>
            <a href="https://github.com/microsoft/magentic-ui/releases">Releases</a>
        </div>
    </div>
    
    <article class="markdown-body">
        <div id="loading" class="loading">Loading README...</div>
        <div id="content" style="display: none;"></div>
        <div id="error" class="error" style="display: none;">
            <h2>Error loading README</h2>
            <p>Please visit the <a href="https://github.com/microsoft/magentic-ui">GitHub repository</a> to view the latest content.</p>
        </div>
    </article>
    
    <script>
        // Configure marked options
        marked.setOptions({
            highlight: function(code, lang) {
                if (lang && hljs.getLanguage(lang)) {
                    return hljs.highlight(code, { language: lang }).value;
                } else {
                    return hljs.highlightAuto(code).value;
                }
            },
            breaks: true,
            gfm: true
        });

        // Fetch and display README content
        fetch('https://raw.githubusercontent.com/microsoft/magentic-ui/main/README.md')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Failed to fetch README');
                }
                return response.text();
            })
            .then(markdown => {
                // Fix relative image paths to point to GitHub
                let fixedMarkdown = markdown
                    // Fix Markdown image syntax: ![alt](path)
                    .replace(/!\[([^\]]*)\]\((?!https?:\/\/)([^)]+)\)/g, '![$1](https://raw.githubusercontent.com/microsoft/magentic-ui/main/$2)')
                    // Fix HTML img tags: <img src="path">
                    .replace(/<img([^>]+)src="(?!https?:\/\/)([^"]+)"/g, '<img$1src="https://raw.githubusercontent.com/microsoft/magentic-ui/main/$2"')
                    // Convert GitHub video URLs to embedded video players
                    .replace(/https:\/\/github\.com\/user-attachments\/assets\/([a-f0-9-]+)/g, 
                        '<video controls width="100%" style="max-width: 800px;"><source src="https://github.com/user-attachments/assets/$1" type="video/mp4">Your browser does not support the video tag.</video>');
                
                const html = marked.parse(fixedMarkdown);
                document.getElementById('loading').style.display = 'none';
                document.getElementById('content').style.display = 'block';
                document.getElementById('content').innerHTML = html;
                
                // Initialize syntax highlighting
                hljs.highlightAll();
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('loading').style.display = 'none';
                document.getElementById('error').style.display = 'block';
            });
    </script>
</body>
</html>