Hugging Face's logo

Spaces:
LucaCappelletti94
/
talking-snake
Sleeping

App Files Community
talking-snake
File size: 8,824 Bytes
19933fe
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1c7725b
 
 
19933fe
 
 
 
 
 
 
 
 
 
 
1c7725b
 
 
 
 
19933fe
1c7725b
 
19933fe
1c7725b
 
19933fe
1c7725b
 
19933fe
1c7725b
 
 
 
 
 
 
 
 
 
 
 
19933fe
 
 
 
 
 
 
 
 
 
 
 
 
 
1c7725b
19933fe
 
 
 
 
1c7725b
 
 
 
19933fe
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1c7725b
19933fe
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1c7725b
 
 
19933fe
 
 
 
 
 
 
 
 
 
 
 
 
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
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Talking Snake - PDF & Web to Speech</title>

    <!-- PWA / Mobile App Configuration -->
    <meta name="application-name" content="Talking Snake">
    <meta name="theme-color" content="#1a1a2e">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="manifest" href="/static/manifest.json">

    <!-- iOS PWA Configuration -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Talking Snake">
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png">

    <!-- Standard favicon -->
    <link rel="icon" type="image/png" href="/static/favicon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/static/icon-192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/static/icon-512.png">

    <link rel="stylesheet" href="/static/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
</head>
<body>
    <div class="main-content">
        <img src="/static/talking_snake.png" alt="Talking Snake" class="logo">
        <h1>Talking Snake</h1>

        <div class="container">
            <div class="input-section" id="inputSection">
                <div class="options-row">
                    <div class="style-selector">
                        <span class="style-label">Style:</span>
                        <div class="style-buttons" id="styleButtons">
                            <button class="style-btn active" data-style="technical" title="Clear, precise reading for code and technical documentation">
                                <i class="fa-solid fa-microchip"></i>
                            </button>
                            <button class="style-btn" data-style="narrative" title="Natural, engaging reading for articles and stories">
                                <i class="fa-solid fa-book-open"></i>
                            </button>
                            <button class="style-btn" data-style="child_narrative" title="Playful, expressive reading for children's stories">
                                <i class="fa-solid fa-child"></i>
                            </button>
                            <button class="style-btn" data-style="news" title="Authoritative, clear delivery for news and reports">
                                <i class="fa-solid fa-newspaper"></i>
                            </button>
                            <button class="style-btn" data-style="academic" title="Measured, scholarly reading for papers and research">
                                <i class="fa-solid fa-graduation-cap"></i>
                            </button>
                        </div>
                    </div>
                    <div class="language-selector">
                        <span class="style-label">Language:</span>
                        <div class="style-buttons" id="languageButtons">
                            <button class="style-btn lang-btn active" data-language="english" title="English">🇬🇧</button>
                            <button class="style-btn lang-btn" data-language="chinese" title="Chinese">🇨🇳</button>
                            <button class="style-btn lang-btn" data-language="japanese" title="Japanese">🇯🇵</button>
                            <button class="style-btn lang-btn" data-language="korean" title="Korean">🇰🇷</button>
                        </div>
                    </div>
                </div>

                <div class="tabs">
                    <button class="tab active" data-tab="upload"><i class="fa-solid fa-upload"></i> Upload File</button>
                    <button class="tab" data-tab="url"><i class="fa-solid fa-link"></i> From URL</button>
                    <button class="tab" data-tab="text"><i class="fa-solid fa-keyboard"></i> Paste Text</button>
                </div>

                <div class="tab-content active" id="upload-tab">
                    <div class="drop-zone" id="dropZone">
                        <i class="fa-solid fa-file-pdf drop-icon"></i>
                        <p>Drag & drop a PDF here</p>
                        <input type="file" id="fileInput" accept=".pdf" class="hidden-file-input">
                    </div>
                </div>

                <div class="tab-content" id="url-tab">
                    <div class="url-form">
                        <div class="url-input-row">
                            <input type="url" id="urlInput" placeholder="https://example.com/article or .pdf">
                            <button class="submit-btn" id="urlSubmit"><i class="fa-solid fa-microphone"></i></button>
                        </div>
                    </div>
                </div>

                <div class="tab-content" id="text-tab">
                    <div class="text-form">
                        <textarea id="textInput" placeholder="Paste or type your text here..." rows="6"></textarea>
                        <button class="submit-btn" id="textSubmit"><i class="fa-solid fa-microphone"></i> Read Text</button>
                    </div>
                </div>
            </div>

            <div class="processing-section" id="processingSection">
                <div class="processing-row-1">
                    <div class="doc-info" id="docInfo"></div>
                </div>
                <div class="processing-row-2">
                    <div class="status" id="status"></div>
                    <div class="processing-progress-container" id="processingProgressContainer">
                        <div class="processing-progress-bar" id="processingProgressBar"></div>
                    </div>
                    <div class="control-buttons">
                        <button class="control-btn play-btn hidden" id="streamPlayBtn" title="Play audio"><i class="fa-solid fa-play"></i></button>
                        <button class="control-btn pause-btn hidden" id="pauseBtn" title="Pause/Resume"><i class="fa-solid fa-pause"></i></button>
                        <button class="control-btn stop-btn" id="stopBtn" title="Stop generation"><i class="fa-solid fa-stop"></i></button>
                    </div>
                </div>
            </div>

            <div class="device-info" id="deviceInfo"></div>

            <div class="player" id="player">
                <div class="filename" id="filename"></div>
                <div class="custom-player">
                    <button class="player-btn play-btn" id="playerPlayBtn" title="Play/Pause">
                        <i class="fa-solid fa-play"></i>
                    </button>
                    <div class="progress-container" id="progressContainer">
                        <div class="progress-bar" id="progressBar"></div>
                        <input type="range" class="progress-slider" id="progressSlider" min="0" max="100" value="0">
                    </div>
                    <span class="time-display" id="timeDisplay">0:00 / 0:00</span>
                    <button class="player-btn download-btn hidden" id="downloadBtn" title="Download Audio">
                        <i class="fa-solid fa-download"></i>
                    </button>
                    <button class="player-btn delete-btn hidden" id="deleteBtn" title="Delete Audio">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
                <audio id="audio" preload="auto"></audio>
            </div>
        </div>
    </div>

    <footer>
        <p>Built with <i class="fa-solid fa-heart"></i> for listeners everywhere | <a href="https://github.com/LucaCappelletti94/talking-snake" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github"></i> GitHub</a></p>
    </footer>

    <script src="/static/app.js"></script>
</body>
</html>