# Project export: HalalScan

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 10.0
- Tagline: Simplify your life with HalalScan, a halal ingredient scanner! With a simple input text, our scanner quickly and accurately identifies any potentially non-Halal components in your favourite foods.
- Devpost: https://devpost.com/software/halalscan-ts8a1v
- GitHub: https://github.com/latifahalabbad/calhacks_2023
- Team: 1 GitHub contributor(s) — latifahalabbad (1 commits)

## Devpost submission (written by the team)

### Inspiration

As a muslim, the inspiration for HalalScan came from the challenges that many Muslims (including myself) face in finding halal food options. As a team, we wanted to create a tool that makes it easier for people to identify halal and non-halal ingredients in food products quickly and accurately.

### What it does

HalalScan is a website that lets users to input ingredient lists, and identifies whether the ingredients are Halal or Haram thanks to OpenAI's technology. It simplifies the decision-making process for individuals and manufacturers by providing clear results. The user takes a photo, copies the text from the image (a feature often seen in both Apple and Android phones), pastes it in the textbox, presses on the submit button, and awaits for their result (either HALAL, meaning islamically permissible, or HARAM, meaning islamically impermissible).

### How we built it

HalalScan was built using HTML, CSS, JavaScript, OpenAI's API, and a lot of help from ChatGPT. We used the following prompt: `If the following ingredient list includes the words alcohol, pork, ham, bacon, gelatin, output the word HARAM alone and if it doesnt include those words output the word HALAL alone: '${ingredientText}'

### Challenges we ran into

Our initial attempt in building HalalScan involved exploring technologies like MindsDB and Reflex, but due to time constraints and slow internet connectivity, we decided to focus on a more simple and straightforward web-based solution.

### Accomplishments we're proud of

We actually finished building it on time We built something functional!! We built something people truly want Learning more about APIs in general

### What we learned

Adaptability is key. Sometimes the simplest method (i.e not using every sponsor's technology) is what leads to success.

### What's next

We hope to rely less on OpenAI and build a model of our own. We could also explore potential collaborations and partnerships to make HalalScan readily available to a wider audience.

## README (from the GitHub repository)

No README available.

## Detected evidence (automated analysis)

Indexed codebase: 2 recognized source files, 5 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (2 of 2)

```
calhacks 2023/index.html
calhacks 2023/styles.css
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- Add files via upload

## Key source files (fetched from GitHub, selected and truncated for size)

### calhacks 2023/styles.css

```css
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffc11f;
    color: #0071cc;
    font-family: sans-serif;
    transform: scale(5); /* Adjust the scale factor as needed */
}

.container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.header {
    flex: 1; /* Grow to take available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 {
    font-size: 36px;
}

.content {
    flex: 1; /* Grow to take available space */
    text-align: center;
}

button {
  background-color: #0071cc;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 10px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 7px 12px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
 -webkit-user-select: none;
 font-family: sans-serif;
    /* Responsive sizing based on screen width */
    @media (max-width: 768px) {
      padding: 8px 16px;
      font-size: 14px;
    }
  }
  
  /* Add a hover effect to change the background color */
  button:hover {
    background-color: #fff;
    color: #ffc11f; /* Change text color on hover */
    transform: scale(1.06); /* Add a slight zoom effect on hover */
    cursor: pointer; /* Change cursor to a pointer on hover for interactivity */
  }
  
```

### calhacks 2023/index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>HalalScan</title>
</head>
<body>
    <!DOCTYPE html>
    <html>
    <body>
        <c!DOCTYPE html>
        <html>
        <head>
            <title>HalalScan</title>
            <link rel="stylesheet" type="text/css" href="styles.css">
        </head>
        <body>
            <div class="container">
                <div class="header">
                    <h1>HalalScan</h1>
                </div>
                <div class="content">
                    <input type="text" id="ingredientInput">
                    <button onclick="classifyIngredient()">Submit</button>
                    <p id="classificationResult"></p>
                </div>
            </div>
            <script>
                function classifyIngredient() {
                    const ingredientText = document.getElementById('ingredientInput').value;
                    const haramIngredients = ["alcohol", "pork", "ham", "bacon", "gelatin"];
        
                    // Check if any of the Haram ingredients are present in the text
                    const containsHaramIngredient = haramIngredients.some(ingredient =>
                        ingredientText.toLowerCase().includes(ingredient.toLowerCase())
                    );
        
                    // Request to OpenAI GPT-3 to classify
                    fetch('https://api.openai.com/v1/engines/davinci/completions', {
                        method: 'POST',
                        headers: {
                            'Authorization': 'Bearer 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',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            prompt: `If the following ingredient list includes the words alcohol, pork, ham, bacon, gelatin, output the word HARAM alone and if it doesnt include those words output the word HALAL alone: '${ingredientText}'`,
                            max_tokens: 50
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        const result = data.choices[0].text;
        
                        // Check if the text contains any Haram ingredients
                        if (containsHaramIngredient) {
                            document.getElementById('classificationResult').textContent = `Haram`;
                        } else {
                            document.getElementById('classificationResult').textContent = `Halal`;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                }
            </script>
        </body>
        </html>
        
    
</body>
</html>
```