SoundBytes

XD Mock-up
First Screen

Inspiration

We created SoundBytes with these four goals in mind: summarize news articles quickly and accurately, produce easy-to-understand audio clips, accelerate learning for busy individuals, and most importantly create a unique user experience that encourages learning.

What it does

SoundBytes is an AI-driven website that uses natural language processing (NLP) to summarize and relay news to the user with a simple search query.

How we built it

Our idea was not as simple as we initially thought. We all coded together through the use of VS Code LiveShare while keeping the back-end and front-end separate at first. On the front-end we used Adobe XD to create a custom buttons and elements. Then we went through and converted it into a functioning website using HTML, CSS, and Javascript. On the backend we used python with flask frame work to implement News's API that took a search query and gave us a URL to relevant news articles. Then we coded a custom scraper that varied depending on the article source to remove junk and retrieve the article which we then sent through an open AI API to summarize. This summary was then used as the transcript and the audio file was produced through Microsoft Azure Cognitive Services.

Challenges we ran into

Limited API One of the main challenges we faced was the limitations of the free version of News API that we initially utilized. This limited access to information and delayed articles by weeks, which negatively impacted the accuracy and relevancy of our article summary.

Fine-tuning our Scraper Another challenge we encountered was the different formatting of articles on various news outlets. We had to spend a significant amount of time fine-tuning and customizing our website scraper to scrape just the articles and none of the junk accurately. Specifically, Fox News and CNN had different HTML formats and paywalls that required additional effort to bypass.

Website Dynamic In our project, we custom-made almost the entirety of our HTML elements in Adobe XD. This made it more challenging to format elements dynamically when translating SVG images and elements. Despite this, we were able to put in extra effort to format the website so that SoundBytes is available on a variety of screen sizes.

Accomplishments that we're proud of

We are immensely proud of our capability to complete this enormous task in the brief time frame. We all learned so much from each other and were able to make something we are proud of and believe is a truly useful tool.

What we learned

We learned to access and utilize different API's and each person in the group was able to share their knowledge about specific languages and applications that they were more comfortable with.

What's next for SoundBytes

We hope to implement SoundBytes into a functional website that users can visit to learn more about the news. As we advance, we would like to find a way to sponsor our website and access the paid version of Azure and News API.

Built With

Submitted to

TAMUhack 2023
- Winner Best Use of Microsoft Cloud for Your Community

Created by

I worked on UI/UX elements of the website. Created Adobe XD design page and helped convert to HTML/CSS.

Cody Nasrallah
I developed a backend solution utilizing Flask, integrating News and Azure Text-to-speech APIs. I pioneered custom web scrapers for multiple news sources, eliminating extraneous information, such as ads, paywalls, etc. Additionally, I expertly blended a Generative Pre-Trained Transformer to provide advanced text summarization capabilities.

Priyansh Verma
Developed the front end HTML, CSS, and JavaScript for the overlay, pop up transcript, and home page while also working on front-end debugging.

Abhinav Devireddy
I worked on the website’s dynamic user interactions, assembling components and images using JavaScript, HTML, CSS, and Bootstrap for a smooth user experience. I also contributed to the server-side logic with Flask, helping integrate AI tools like ChatGPT and Azure Cognitive Services to convert news articles into audio, enhancing accessibility.

Nikola Slavchev