Hackathon Submission. DEAR DIARY AI

src/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+Based on KeepAChangelog.
+Generated by **Documatic.**
+
+## Unreleased
+
+### Added
+
+* Files via upload
+
+### Changed
+
+* Readme.md
+
+### Removed
+
+* .replit

src/DearDiary/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+/shared
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.now
+.local

src/DearDiary/.prettierrc.js

@@ -0,0 +1,7 @@
+// prettier.config.js or .prettierrc.js
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  singleQuote: true,
+  printWidth: 120,
+};

src/DearDiary/LICENSE

@@ -0,0 +1,8 @@
+Copyright 2020 Stephen Haney, Suyash Joshi, Devin Lane
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

src/DearDiary/README.md

@@ -0,0 +1,107 @@
+# Turn your journal into music
+
+## [DearDiary.ai](https://deardiary.ga/)
+
+
+---
+
+<img src="https://deardiary.ai/complete-tree.png" width="400" alt="Illustration of a peaceful tree, leaning to the left, with birds flying away" />
+
+## Why use it?
+
+We want you to journal and to feel better. [Studies](https://pubmed.ncbi.nlm.nih.gov/23790815/) [show](https://pubmed.ncbi.nlm.nih.gov/16942980/) that journaling increases mindfulness and alleviates stress, anxiety, and depression.
+
+We also want you to create music. Like journaling, the mental health benefits of creating music are [well-documented](https://www.sciencedirect.com/science/article/abs/pii/S0272735809000026). And music is awesome.
+
+## How it works
+
+**Sentiment Analysis**
+As you type each word, we perform sentiment analysis using the popular natural language processing library VADER.js. This returns a prediction score from -1.0 to +1.0, that we interpret as a sentiment along the spectrum of negative to neutral to positive.
+
+**Music Creation using Magenta**
+We use Google’s Magenta MusicVAE pre-trained model to interpolate between two pre-composed melodies—one happy, one sad—created by our teammate Devin Lane who has a background in music composition and education. As you type, our app creates new music that lives in the latent space of the emotion spectrum between happy, neutral, and sad based on our sentiment analysis.
+
+**Visuals and a e s t h e t i c**
+We opt for minimal and calming design because we want people to freely express their thoughts and feelings. We animate an SVG tree with leaves and birds by covering parts of the image with white squares that we dynamically remove as the user types.
+
+**Playfulness and Creativity**
+We build in Easter eggs to encourage playfulness and creativity. The music changes with punctuation, special characters, upper case, and deleting. Try strong emotion words to see what you can create!
+
+**Playback and social sharing**
+We save entries using Google Firestore for realtime persistence so that users can save, share, and replay the exact song they create. We integrate "share to Twitter" and "share as a link" functionality.
+
+## What is exciting and useful about this project?
+
+**Artistic and musical considerations**: Expanding the boundaries of user-generated art informed by AI trained on creative musicians' compositions.
+
+**Music education and empowerment**: more people feel that—yes—they can create music.
+
+**Mindfulness, mental health, emotional awareness**: A soothing, engaging return to the self. A recharge in the deluge of a storm.
+
+**Coping during 2020**: Traumatic events abound—COVID-19, reckoning with social and racial justice, natural disasters, political division—we offer a moment to come into deeper awareness with your emotions. This radical self-compassion is an important step in societal transformation.
+
+## Challenges we ran into, what we learned, and what we're proud of
+
+**NLP sentiment score** is a limited metric for gauging emotion of text. We were hoping to find a multi-dimensional emotion library, but there are only a few available and they're all paid services. It would be a great open source project to build an detailed emotion NLP API that runs in the browser and is accessible to scrappy teams.
+
+**Music**: writing melodies that were contrasted enough to convey different emotions, yet similar enough to create musically-satisfying interpolations. Lots of trial and error with very dissonant AI interpolations between the compositions.
+
+**Playback**: Engineered advanced custom diffing solution to playback exact melody snapshot of user activity and implemented state management system to accurately play back each note character by character.
+
+**Browser compatibility**: Extensive testing and bug resolution for Chrome, Firefox, Safari, MacOS, Windows, and iOS.
+
+## What's next for Dear Diary
+
+- Increase dialogue with mental health professionals for maximum emotional benefit and enjoyment for users
+
+- Increase dialogue community of users who are musically timid, yet curious
+
+- Increase dialogue with general users for next directions
+
+- Offer new sound design and melodies
+
+- Offer journal entry saving and user accounts as well as new sharing integrations
+
+- Improved visuals using generative AI
+
+## Areas for future research and technological developments in the community
+
+- Improved multi-dimensional emotion ranking libraries
+
+- ImprovRNN often produced results we found not musical
+
+- Integrate MIDI to Tone.js and Magenta.js
+
+- Improved documentation to match the quality of the examples
+
+- Create audio plug-ins for DAWs like Logic and Reaper
+
+---
+
+### Prior art:
+
+Jazz Keys: https://jazzkeys.plan8.co/
+
+Magenta-js: https://github.com/magenta/magenta-js
+
+Tone.js: https://tonejs.github.io/
+
+
+### Codebase instructions
+
+#### To generate sequences:
+
+To generate sequences, navigate to /generate-melodies. This will interpolate the two seed sequences and output the results to the browser console. You can then update /src/sequences.json with the output, which will be consumed by the app on the next deploy.
+
+#### To convert from a midi file to INoteSequence:
+
+Place your .mid file in the public folder and manually update /src/components/MidiConvert.tsx to point at the right path. Then navigate to /midi-convert in your browser. Check the console for the sequence version.
+
+#### To run the repo
+
+```
+// install deps:
+yarn
+// run next dev:
+yarn dev
+```

src/DearDiary/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

src/DearDiary/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "one-story-one-song",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/styled": "^10.0.27",
+    "@magenta/music": "^1.19.0",
+    "firebase": "^7.19.1",
+    "lodash.debounce": "^4.0.8",
+    "next": "9.5.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "tone": "^14.7.39",
+    "vader-sentiment": "^1.1.3"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/node": "^14.6.0",
+    "@types/react": "^16.9.46",
+    "@types/styled-components": "^5.1.2",
+    "eslint": "^7.7.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "typescript": "^3.9.7"
+  }
+}

src/DearDiary/src/components/AboutOverlay.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/core';
+
+export const bounceIn = keyframes`
+  0% {
+    transform: scale(0.98);
+  }
+
+  60% {
+    transform: scale(1.008);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`;
+
+export const Modal = styled.div({
+  backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  maxWidth: 660,
+  margin: 'auto',
+  top: '5vh',
+  maxHeight: '90vh',
+  position: 'relative',
+  padding: '50px 60px',
+  borderRadius: 4,
+  boxShadow: '0 0 1rem 0 rgba(0, 0, 0, .08)',
+  border: '1px solid #eee',
+  fontSize: '21px',
+  lineHeight: '32px',
+  overflow: 'auto',
+  animation: `${bounceIn} 1s ease`,
+  boxSizing: 'border-box',
+
+  '@media (min-width: 768px)': {
+    top: '10vh',
+    maxHeight: '80vh',
+  },
+});
+
+export const CloseButton = styled.button({
+  position: 'absolute',
+  top: 20,
+  right: 20,
+  padding: 5,
+  outline: 0,
+  background: 'none',
+  border: 0,
+  cursor: 'pointer',
+  opacity: '0.6',
+  transition: 'transform 1s ease-out',
+  '&:hover': {
+    transform: 'scale(1.1)',
+  },
+});
+
+const EmbedContainer = styled.div(`
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+
+  > iframe, > object, > embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`);
+
+type Props = {
+  setIsOpen: (isOpen: boolean) => void;
+};
+export const AboutOverlay = ({ setIsOpen }: Props) => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'hidden',
+        width: '100vw',
+        height: '100vh',
+        zIndex: 20,
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        backdropFilter: 'blur(5px)',
+      }}
+      onClick={(e) => {
+        // If the click is on the overlay, close the modal
+        if (e.currentTarget === e.target) {
+          setIsOpen(false);
+        }
+      }}
+    >
+      <Modal>
+        <h1 style={{ marginBottom: '40px' }}>Hello Mate!</h1>
+        <p style={{ fontFamily: 'San Francisco, Arial, sans serif' }}>
+          We created this for a ML & Music project for Documatic Hackathon 2022.
+        </p>
+
+        <p style={{ fontFamily: 'San Francisco, Arial, sans serif' }}>
+          <a href="https://github.com/Radon-Development/hackathon" target="_blank">
+            GitHub link (open source)
+          </a>
+        </p>
+        <h2 style={{ marginTop: '50px' }}>Authors</h2>
+        <p style={{ fontFamily: 'San Francisco, Arial, sans serif' }}>
+          Van.sh07 – follow up <a href="https://instagram.com/van._.sh07">Instagram</a>
+        </p>
+        <p style={{ fontFamily: 'San Francisco, Arial, sans serif' }}>
+          Vansh 0.0 – Check out <a href="https://vanshdhillon.ml">Portfolio Website!</a>
+        </p>
+        <p style={{ fontFamily: 'San Francisco, Arial, sans serif' }}>
+          Radon Development[Owner] – Check out <a href="https://radondev.ml">!RadonDev.com</a>
+        </p>
+        <CloseButton onClick={() => setIsOpen(false)}>
+          <svg
+            style={{ transform: 'scale(2)' }}
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M11.3536 4.35355C11.5488 4.15829 11.5488 3.84171 11.3536 3.64645C11.1583 3.45118 10.8417 3.45118 10.6464 3.64645L7.5 6.79289L4.35355 3.64645C4.15829 3.45118 3.84171 3.45118 3.64645 3.64645C3.45118 3.84171 3.45118 4.15829 3.64645 4.35355L6.79289 7.5L3.64645 10.6464C3.45118 10.8417 3.45118 11.1583 3.64645 11.3536C3.84171 11.5488 4.15829 11.5488 4.35355 11.3536L7.5 8.20711L10.6464 11.3536C10.8417 11.5488 11.1583 11.5488 11.3536 11.3536C11.5488 11.1583 11.5488 10.8417 11.3536 10.6464L8.20711 7.5L11.3536 4.35355Z"
+              fill="#282B2E"
+            />
+          </svg>
+        </CloseButton>
+      </Modal>
+    </div>
+  );
+};