GithubHelp home page GithubHelp logo

tasuren / shabe2x Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 489 KB

シンプルなHTML書式対応のシャドーイング支援アプリ

Home Page: https://shabe2x.tasuren.jp

License: GNU General Public License v3.0

JavaScript 9.83% HTML 2.02% TypeScript 18.66% Svelte 68.12% CSS 1.37%
shadowing svelte webapp

shabe2x's Introduction

しゃべしゃべ

これはシャドーイングをするためのウェブアプリで、任意の文章を読み上げることができます。これは、 Web Speech APIを使ったネイティブ環境での読み上げを使用し、高速にかつプライバシー配慮して動作が可能です。

  • HTMLのペーストに対応 — HTMLをペーストした時、スタイルを消して書式そのままにペーストが可能。
  • 部分的な読み上げ — 文章を選択した時、その選択した部分だけ読み上げ可能。
  • シンプルなUI — ブラウザ標準のデザインを踏襲し、基本配色も二色で明瞭。
  • ダークモード対応 — システムに合わせる自動機能付き。

技術スタック

  • SvelteKit
  • Tailwind CSS
    Preflightが無効化されています。 開発時にはこれを留意してください。
  • Cloudflare Pages

ToDo

  • Web Speech APIによる読み上げの実装
  • GoogleのText-to-Speech AIによる読み上げの実装 これは有料のため、有料プランやAPIキーの設定項目を設ける可能性があります。
  • ログイン機能と周辺のインフラを整備
  • 「後で読むリスト」などの機能を実装

その他情報

shabe2x's People

Contributors

tasuren avatar

Watchers

avatar

shabe2x's Issues

選択した領域にツールチップが被らないようにする

例えば下から上へと長い文章を選択した場合、ツールチップが文章の上に表示されてしまいます。これは少し不便なので、選択領域のサイズに合わせて、領域の下か上にツールチップを追いやるようにした方が良いかもしれません。

2024-04-28.9.50.10.mov

画像取り込み

できればこれを使いたいが、これはIssueによると日本語だとか動作未確認。😳

練習帳機能

ログイン必須になるかもしれないが、単語帳のように練習帳を作れると便利かもしれない。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.