Giter Club home page Giter Club logo

bragging-detector's Introduction

自慢ディテクター

code style: prettier

会話中の文章を認識して自慢を検知します。自慢が検知されたときに効果音を鳴らすことができるアプリケーションです。

https://bragging-detector.vercel.app/

Folder Structure

After creating an app, it should look something like:

.
├── README.md
├── components
│   ├── head.js
│   └── nav.js
├── next.config.js
├── node_modules
│   ├── [...]
├── package.json
├── pages
│   └── index.js
├── static
│   └── favicon.ico
└── yarn.lock

Routing in Next.js is based on the file system, so ./pages/index.js maps to the / route and ./pages/about.js would map to /about.

The ./static directory maps to /static in the next server, so you can put all your other static resources like images or compiled CSS in there.

Out of the box, we get:

  • Automatic transpilation and bundling (with webpack and babel)
  • Hot code reloading
  • Server rendering and indexing of ./pages
  • Static file serving. ./static/ is mapped to /static/

Read more about Next's Routing

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any errors in the console.

npm run build

Builds the app for production to the .next folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run start

Starts the application in production mode. The application should be compiled with `next build` first.

See the section in Next docs about deployment for more information.

bragging-detector's People

Contributors

kai0310 avatar rossy0213 avatar yoidea avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

bragging-detector's Issues

ローカル(yarn dev)で実行した際にエラーが起こる

起こっている問題

ローカル(yarn dev)で実行時に以下二つのエラーが出ます。

  • 1

    react.development.js?72d0:220 Warning: Failed prop type: Invalid prop size of value large supplied to
    ForwardRef(IconButton)`, expected one of ["small","medium"].

  • 2

    Warning: Prop className did not match. Server: "MuiBox-root MuiBox-root-39" Client: "MuiBox-root MuiBox-root-1"

起こっている問題の再現手段

  1. git clone https://github.com/yoidea/bragging-detector.git
  2. yarn install
  3. yarn dev
  4. http://localhost:3000 を開く
  5. デベロッパーツールを開く

スクリーンショット

スクリーンショット 2021-01-12 16 54 36

環境

  • MacOS
  • Chrome

解決手段?

1 についてはエラーメッセージやIconButton API#props - MATERIAL-UIにある通り('small' | 'medium')を指定するか無指定でデフォルトに任せる(もしくは自作?)
https://github.com/yoidea/bragging-detector/blob/c86659583ddf3b4f01680f8c63ee11bb12a8209e/components/uploadButton.js#L25-L33

2は、Material-UIのサーバーサイドレンダリング(SSR)時にcss modulesによるクラス名付与が合わなくなる問題によるもの?

備考

  • 本番(production mode?)だとエラーが出ないので対応する必要はないかもしれません。
  • MATERIAL-UI、Nextについて触れたことがないのでおま環の可能性があるかもしれません。

一部の単語がホワイトスペースにより認識できない

起こっている問題 / The Problem

  • PS5の様な単語であるとAPIの方でPS 5と空白が開いた状態で認識されてしまっている.結果としてマッチしないので自慢を検知できない状況がが発生している.

関係するissues,PR / Related Issues,PR

スクリーンショット / Screenshot

スクリーンショット 2021-01-11 22 54 00

期待する見せ方・挙動 / Expected Behavior

  • PS5PS 5でも認識させる様にする

起こっている問題の再現手段 / Steps to Reproduce

  1. 反応する単語にPS5を追加
  2. PS5が含まれる文章を話す

動作環境・ブラウザ / Environment

  • macOS
  • Chrome

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.