Skip to content

Commit

Permalink
Working with DenseNet 169 model. Bugs fixed.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mattk70
Mattk70 committed Jan 14, 2022
1 parent c6dd874 commit 2eab6b7
Show file tree
Hide file tree
Showing 22 changed files with 219 additions and 321 deletions.
19 changes: 8 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<b>This repo is currently under development.</b>

# BirdNET-Electron
# Chirpity-Electron

Electron app for sound file analysis with BirdNET.
Electron app for sound file analysis with Chirpity.

Author: Stefan Kahl
Author: Matthew Kirkland

Contact: [email protected]

Website: https://birdnet.cornell.edu/

Please cite as (PDF coming soon):
Credit to Stephan Kahl:

```
@phdthesis{kahl2019identifying,
Expand All @@ -26,8 +24,8 @@ Please cite as (PDF coming soon):
First, clone the project and install all dependencies:

```
git clone https://github.com/kahst/BirdNET-Electron.git
cd BirdNET-Electron
git clone https://github.com/kahst/Chirpity-Electron.git
cd Chirpity-Electron
npm install
```

Expand Down Expand Up @@ -55,7 +53,7 @@ Now, we need to install <i>electron</I> with:
npm install --save-dev electron
```

BirdNET requires Tensorflow.js which we install with:
Chirpity requires Tensorflow.js which we install with:

```
npm install @tensorflow/tfjs
Expand All @@ -74,7 +72,6 @@ This app also needs some additional packages that we have to install.
```
npm install audio-loader
npm install audio-resampler
npm install array-normalize
npm install colormap
```

Expand All @@ -89,7 +86,7 @@ We can now add the export script in the <i>package.json</i>:
```
"scripts": {
"start": "electron .",
"export": "electron-packager . --out dist --overwrite"
"export": "electron-packager . --out packages --overwrite"
}
```

Expand Down
2 changes: 1 addition & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
html, body {
height: 100%;
padding-top: 28px;
padding-top: 20px;
padding-bottom: 18px;
background-color: #f8f9fa;
overflow: hidden;
Expand Down
Binary file removed example/Blue-headed-Vireo-BirdNET-Test.wav
View file
Binary file not shown.
Binary file removed example/Song_Sparrow.mp3
View file
Binary file not shown.
Binary file removed example/Soundscape.wav
View file
Binary file not shown.
Binary file removed example/White-crowned_Sparrow.mp3
View file
Binary file not shown.
Binary file modified img/icon/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
203 changes: 105 additions & 98 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,136 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />

<!-- Bootstrap & CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script>let $ = require('jquery');</script>
<script>require('popper.js');</script>
<script>require('bootstrap');</script>
<!-- Additional JavaScript & CSS -->
<link rel="stylesheet" href="css/style.css" />
<script src="js/labels.js"></script>
<script src="js/chirpity.js"></script>
<script src="js/ui.js"></script>

<!-- Modified wavesurfer drawer -->
<script src="js/wavesurfer.min.js"></script>
<script src="js/wavesurfer.spectrogram.min.js"></script>
<script src="js/wavesurfer.drawer.extended.js"></script>
<script src="js/wavesurfer.regions.min.js"></script>
<!--script src="js/wavesurfer.timeline.min.js"></script-->

<!-- App title -->
<title>Chirpity Sound Analysis</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>

<!-- Bootstrap & CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script>let $ = require('jquery');</script>
<script>require('popper.js');</script>
<script>require('bootstrap');</script>

<!-- Additional JavaScript & CSS -->
<link rel="stylesheet" href="css/style.css"/>
<script src="js/labels.js"></script>
<script src="js/chirpity.js"></script>
<script src="js/ui.js"></script>

<!-- Modified wavesurfer drawer -->
<script src="js/wavesurfer.min.js"></script>
<script src="js/wavesurfer.spectrogram.min.js"></script>
<script src="js/wavesurfer.drawer.extended.js"></script>
<script src="js/wavesurfer.regions.min.js"></script>
<!--script src="js/wavesurfer.timeline.min.js"></script-->

<!-- App title -->
<title>Chirpity Sound Analysis</title>

</head>
<body>

<!-- Navigation bar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<!-- Navigation bar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Chirpity</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
File
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#" onclick="showFileDialog();">Open audio file</a>
<a class="dropdown-item disabled" href="#">Save analysis results</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" onclick="exitApplication();">Exit application</a>
</div>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Analysis
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#" onclick="predict(AUDIO_DATA, MODEL);">Analyze entire file</a>
<a class="dropdown-item disabled" href="#">Analyze selected interval</a>
</div>
</li>
</ul>
<img class="" src="img/logo/CLO_logo_inverted.png" width="250px"/>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
File
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#" onclick="showFileDialog();">Open audio file</a>
<a class="dropdown-item disabled" href="#">Save analysis results</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" onclick="exitApplication();">Exit application</a>
</div>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Analysis
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#" onclick="predict(AUDIO_DATA, MODEL);">Analyze entire file</a>
<a class="dropdown-item disabled" href="#">Analyze selected interval</a>
</div>
</li>
</ul>
<img class="" src="img/logo/chirpity_logo.png" width="400px"/>
</div>
</nav>
</nav>

<!-- Content wrapper -->
<div class="flex-column h-100" id="contentWrapper">
<!-- Content wrapper -->
<div class="flex-column h-100" id="contentWrapper">

<!-- Load audio file hint -->
<div class="d-flex h-100 flex-column text-dark align-items-center justify-content-center" id="loadFileHint">
<div class="row">
<p class="lead justify-content-center" id="loadFileHintText">Load an audio file for analysis by clicking</br>on <i>File > Open audio file</i> in the top menu.</p>
</div>
<div class="row">
<div class="d-none spinner-border" role="status" id="loadFileHintSpinner"></div>
</div>
<div class="row"><p class="d-none lead" id="loadFileHintLog"></p> </div>
</div>
<!--div class="row">
<p class="lead justify-content-center" id="modelWarmUpText">Warming up the model...</p>
</div-->
<div class="row">
<p class="lead justify-content-center" id="loadFileHintText">Load an audio file for analysis by
clicking</br>on <i>File > Open audio file</i> in the top menu.</p>
</div>
<div class="row">
<div class="d-none spinner-border" role="status" id="loadFileHintSpinner"></div>
</div>
<div class="row"><p class="d-none lead" id="loadFileHintLog"></p></div>
</div>

<!-- Spectrogram view -->
<div class="" id="specContainer"></div>
<div class="" id="specTimeline"></div>

<!-- Controls view -->
<div class="container-fluid p-2 bg-dark text-white d-none" id="controlsWrapper" style="height: 55px;">
<div class="btn-group btn-group" role="group">
<button class="btn btn-primary " onclick="WAVESURFER.play()">
<i class="material-icons">play_arrow</i><!--span>Play</span-->
</button>
<button class="btn btn-primary " onclick="WAVESURFER.pause()">
<i class="material-icons">pause</i><!--span>Pause</span-->
</button>
<button class="btn btn-primary " onclick="zoomSpecIn();">
<i class="material-icons">zoom_in</i>
</button>
<button class="btn btn-primary " onclick="zoomSpecOut();">
<i class="material-icons">zoom_out</i>
</button>
</div>

<div class="btn-group btn-group" role="group">
<button class="btn btn-primary " onclick="WAVESURFER.play()">
<i class="material-icons">play_arrow</i><!--span>Play</span-->
</button>
<button class="btn btn-primary " onclick="WAVESURFER.pause()">
<i class="material-icons">pause</i><!--span>Pause</span-->
</button>
<button class="btn btn-primary " onclick="zoomSpecIn();">
<i class="material-icons">zoom_in</i>
</button>
<button class="btn btn-primary " onclick="zoomSpecOut();">
<i class="material-icons">zoom_out</i>
</button>
</div>
</div>

<!-- Result table -->
<div class="d-none p-3 overflow-auto" id="resultTableContainer">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Timestamp</th>
<th scope="col">Common name</th>
<th scope="col">Scientific name</th>
<th scope="col">Confidence</th>
</tr>
</thead>
<tbody class="text-dark" id="resultTableBody">
</tbody>
</table>
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Timestamp</th>
<th scope="col">Common name</th>
<th scope="col">Scientific name</th>
<th scope="col">Confidence</th>
</tr>
</thead>
<tbody class="text-dark" id="resultTableBody">

</tbody>
</table>
</div>

</div>
</div>


<!-- Footer -->
<div class="d-flex fixed-bottom p-2 bg-primary text-white justify-content-center" id="footer">
<!-- Footer -->
<div class="d-flex fixed-bottom p-2 bg-primary text-white justify-content-center" id="footer">
<small>Chirpity | <span id="year"></span></small>
</div>
</div>
</body>
Loading

0 comments on commit 2eab6b7

Please sign in to comment.