Spaces:

Sharathhebbar24
/

sentiment-analysis-fe

Runtime error

App Files Files Community

Sharathhebbar24 commited on Apr 26

Commit

0509f82

1 Parent(s): f154c9d

Sentiment Analysis

Browse files

Files changed (27) hide show

.gitignore +23 -0
Dockerfile +25 -0
package-lock.json +0 -0
package.json +44 -0
public/favicon.ico +0 -0
public/index.html +14 -0
public/logo192.png +0 -0
public/logo512.png +0 -0
public/manifest.json +25 -0
public/robots.txt +3 -0
src/App.css +38 -0
src/App.js +86 -0
src/App.test.js +8 -0
src/components/AboutSection.js +119 -0
src/components/Footer.js +70 -0
src/components/Header.js +33 -0
src/components/PreviousAnalysis.js +99 -0
src/components/ReviewInput.js +85 -0
src/components/SentimentResult.js +124 -0
src/index.css +13 -0
src/index.js +17 -0
src/lib/api.js +27 -0
src/logo.svg +1 -0
src/pages/Home.js +91 -0
src/pages/not-found.js +44 -0
src/reportWebVitals.js +13 -0
src/setupTests.js +5 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,23 @@

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# production
+/build
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Dockerfile ADDED Viewed

	@@ -0,0 +1,25 @@

+# Use an official Node.js runtime as a parent image
+FROM node:16
+# Set the working directory
+WORKDIR /app
+# Copy package.json and install dependencies
+COPY package.json .
+RUN npm install
+# Copy the rest of the application code
+COPY . .
+# Build the React app
+RUN npm run build
+# Use an Nginx image to serve the built app
+FROM nginx:alpine
+COPY --from=0 /app/build /usr/share/nginx/html
+# Expose the port Nginx runs on
+EXPOSE 80
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,44 @@

+{
+  "name": "sentimental-analysis",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/material": "^7.0.2",
+    "wouter": "^3.3.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/favicon.ico ADDED Viewed

public/index.html ADDED Viewed

	@@ -0,0 +1,14 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Movie Review Sentiment Analysis Tool" />
+    <title>Movie Review Sentiment Analysis</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/logo192.png ADDED Viewed

public/logo512.png ADDED Viewed

public/manifest.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css ADDED Viewed

	@@ -0,0 +1,38 @@

+.App {
+  text-align: center;
+}
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+.App-link {
+  color: #61dafb;
+}
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js ADDED Viewed

	@@ -0,0 +1,86 @@

+import React from 'react';
+import { Route, Switch } from 'wouter';
+import { CssBaseline, Box } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Home from './pages/Home';
+import NotFound from './pages/not-found';
+import Header from './components/Header';
+import Footer from './components/Footer';
+// Create a global theme with movie-themed colors
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#2C3E50', // Navy blue
+      contrastText: '#ffffff',
+    },
+    secondary: {
+      main: '#E74C3C', // Review red
+      contrastText: '#ffffff',
+    },
+    success: {
+      main: '#2ECC71', // Positive green
+      contrastText: '#ffffff',
+    },
+    warning: {
+      main: '#F1C40F', // Neutral yellow
+      contrastText: '#ffffff',
+    },
+    background: {
+      default: '#F8F9FA',
+      paper: '#ffffff',
+    },
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    h1: {
+      fontSize: '2.5rem',
+      fontWeight: 700,
+      marginBottom: '1rem',
+    },
+    h2: {
+      fontSize: '1.75rem',
+      fontWeight: 600,
+      marginBottom: '0.75rem',
+    },
+    h3: {
+      fontSize: '1.5rem',
+      fontWeight: 600,
+      marginBottom: '0.5rem',
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+  spacing: 8,
+});
+function Router() {
+  return (
+    <Switch>
+      <Route path="/" component={Home} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+}
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh'
+      }}>
+        <Header />
+        <Box sx={{ flex: 1 }}>
+          <Router />
+        </Box>
+        <Footer />
+      </Box>
+    </ThemeProvider>
+  );
+}
+export default App;

src/App.test.js ADDED Viewed

	@@ -0,0 +1,8 @@

+import { render, screen } from '@testing-library/react';
+import App from './App';
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/AboutSection.js ADDED Viewed

	@@ -0,0 +1,119 @@

+import React from 'react';
+import { Box, Typography, Paper, Chip } from '@mui/material';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import ThumbDownIcon from '@mui/icons-material/ThumbDown';
+import RemoveIcon from '@mui/icons-material/Remove';
+import RateReviewIcon from '@mui/icons-material/RateReview';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+function AboutSection() {
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        p: 3,
+        mb: 4,
+        borderRadius: 2,
+        bgcolor: 'background.paper',
+        border: '1px solid rgba(0,0,0,0.08)'
+      }}
+    >
+      <Typography variant="h4" component="h2" gutterBottom fontWeight="500">
+        How It Works
+      </Typography>
+      <Typography variant="body1" paragraph>
+        This tool uses artificial intelligence to analyze the sentiment of movie reviews.
+        Simply enter or paste a movie review, and our AI will classify it as positive, negative, or neutral,
+        along with a confidence score and detailed analysis.
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 3, mt: 1 }}>
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          textAlign: 'center',
+          p: 2,
+          height: '100%',
+          bgcolor: '#f8f9fa',
+          borderRadius: 2,
+          flex: 1
+        }}>
+          <RateReviewIcon sx={{ fontSize: 40, color: 'primary.main', mb: 1 }} />
+          <Typography variant="h6" gutterBottom>
+            Enter Your Review
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            Copy and paste a movie review or write your own in the text area.
+          </Typography>
+        </Box>
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          textAlign: 'center',
+          p: 2,
+          height: '100%',
+          bgcolor: '#f8f9fa',
+          borderRadius: 2,
+          flex: 1
+        }}>
+          <AutoAwesomeIcon sx={{ fontSize: 40, color: 'primary.main', mb: 1 }} />
+          <Typography variant="h6" gutterBottom>
+            AI Analysis
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            Our AI model analyzes the text to determine the sentiment and confidence level.
+          </Typography>
+        </Box>
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          textAlign: 'center',
+          p: 2,
+          height: '100%',
+          bgcolor: '#f8f9fa',
+          borderRadius: 2,
+          flex: 1
+        }}>
+          <Box sx={{ display: 'flex', gap: 1, mb: 1 }}>
+            <Chip
+              icon={<ThumbUpIcon />}
+              label="Positive"
+              size="small"
+              sx={{ bgcolor: 'success.main', color: 'white' }}
+            />
+            <Chip
+              icon={<ThumbDownIcon />}
+              label="Negative"
+              size="small"
+              sx={{ bgcolor: 'secondary.main', color: 'white' }}
+            />
+            <Chip
+              icon={<RemoveIcon />}
+              label="Neutral"
+              size="small"
+              sx={{ bgcolor: 'warning.main', color: 'white' }}
+            />
+          </Box>
+          <Typography variant="h6" gutterBottom>
+            View Results
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            See the sentiment classification, confidence score, and detailed reasoning.
+          </Typography>
+        </Box>
+      </Box>
+      <Typography variant="body2" color="text.secondary" sx={{ mt: 3, fontStyle: 'italic' }}>
+        This application uses Cohere's large language model API to perform sentiment analysis.
+      </Typography>
+    </Paper>
+  );
+}
+export default AboutSection;

src/components/Footer.js ADDED Viewed

	@@ -0,0 +1,70 @@

+import React from 'react';
+import { Box, Typography, Container, Link, Divider } from '@mui/material';
+function Footer() {
+  return (
+    <Box
+      component="footer"
+      sx={{
+        py: 3,
+        mt: 4,
+        bgcolor: '#f5f5f5'
+      }}
+    >
+      <Divider />
+      <Container maxWidth="lg">
+        <Box sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          textAlign: { xs: 'center', md: 'left' },
+          mt: 2
+        }}>
+          <Typography variant="body2" color="text.secondary">
+            © {new Date().getFullYear()} Movie Review Sentiment Analysis
+          </Typography>
+          <Box sx={{
+            display: 'flex',
+            gap: 2,
+            mt: { xs: 2, md: 0 }
+          }}>
+            <Link
+              href="https://cohere.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="inherit"
+              underline="hover"
+            >
+              Powered by Cohere AI
+            </Link>
+            <Link
+              href="#"
+              color="inherit"
+              underline="hover"
+            >
+              About
+            </Link>
+            <Link
+              href="#"
+              color="inherit"
+              underline="hover"
+            >
+              Terms
+            </Link>
+            <Link
+              href="#"
+              color="inherit"
+              underline="hover"
+            >
+              Privacy
+            </Link>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+export default Footer;

src/components/Header.js ADDED Viewed

	@@ -0,0 +1,33 @@

+import React from 'react';
+import { AppBar, Toolbar, Typography, Box, Container } from '@mui/material';
+import MovieIcon from '@mui/icons-material/Movie';
+import { Link } from 'wouter';
+function Header() {
+  return (
+    <AppBar position="static" sx={{ backgroundColor: '#2C3E50', boxShadow: 2, mb: 2 }}>
+      <Container maxWidth="lg">
+        <Toolbar sx={{ justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <MovieIcon sx={{ mr: 1, fontSize: 28 }} />
+            <Typography
+              variant="h6"
+              component={Link}
+              to="/"
+              sx={{
+                textDecoration: 'none',
+                color: 'white',
+                fontWeight: 'bold',
+                cursor: 'pointer'
+              }}
+            >
+              Movie Review Analyzer
+            </Typography>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+export default Header;

src/components/PreviousAnalysis.js ADDED Viewed

	@@ -0,0 +1,99 @@

+import React from 'react';
+import {
+  Box,
+  Typography,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  ListItemIcon,
+  Chip,
+  Divider
+} from '@mui/material';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import ThumbDownIcon from '@mui/icons-material/ThumbDown';
+import RemoveIcon from '@mui/icons-material/Remove';
+import HistoryIcon from '@mui/icons-material/History';
+function PreviousAnalyses({ analyses, onViewAnalysis }) {
+  if (!analyses.length) {
+    return (
+      <Box sx={{ textAlign: 'center', py: 4 }}>
+        <HistoryIcon sx={{ fontSize: 40, color: 'text.secondary', mb: 2 }} />
+        <Typography variant="body1" color="textSecondary">
+          Previous analyses will appear here
+        </Typography>
+        <Typography variant="body2" color="textSecondary">
+          Analyze your first review to get started
+        </Typography>
+      </Box>
+    );
+  }
+  return (
+    <List sx={{ width: '100%', maxHeight: '400px', overflow: 'auto' }}>
+      {analyses.map((analysis, index) => {
+        const getSentimentIcon = (sentiment) => {
+          switch (sentiment) {
+            case 'positive': return <ThumbUpIcon sx={{ color: 'success.main' }} />;
+            case 'negative': return <ThumbDownIcon sx={{ color: 'secondary.main' }} />;
+            default: return <RemoveIcon sx={{ color: 'warning.main' }} />;
+          }
+        };
+        const truncateText = (text, maxLength = 50) => {
+          return text.length > maxLength
+            ? `${text.substring(0, maxLength)}...`
+            : text;
+        };
+        console.log(analysis)
+        return (
+          <React.Fragment key={analysis.id || index}>
+            <ListItem disablePadding sx={{ mb: 1 }}>
+              <ListItemButton
+                sx={{
+                  border: '1px solid',
+                  borderColor: 'divider',
+                  borderRadius: 1,
+                  "&:hover": {
+                    bgcolor: 'action.hover',
+                  }
+                }}
+              >
+                <ListItemIcon>
+                  {getSentimentIcon(analysis.sentiment)}
+                </ListItemIcon>
+                <ListItemText
+                  primary={truncateText(analysis.text)}
+                  secondary={
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+                      <Chip
+                        label={`${analysis.sentiment}`}
+                        size="small"
+                        sx={{
+                          bgcolor: analysis.sentiment === 'positive' ? 'success.light' :
+                                  analysis.sentiment === 'negative' ? 'secondary.light' :
+                                  'warning.light',
+                          color: '#fff',
+                          fontWeight: 'medium',
+                          fontSize: '0.7rem'
+                        }}
+                      />
+                      <Typography variant="caption">
+                        {analysis.createdAt ? new Date(analysis.createdAt).toLocaleTimeString() : 'Just now'}
+                      </Typography>
+                    </Box>
+                  }
+                />
+              </ListItemButton>
+            </ListItem>
+            {index < analyses.length - 1 && <Divider variant="fullWidth" component="li" />}
+          </React.Fragment>
+        );
+      })}
+    </List>
+  );
+}
+export default PreviousAnalyses;

src/components/ReviewInput.js ADDED Viewed

	@@ -0,0 +1,85 @@

+import React from 'react';
+import { Box, TextField, Button, Typography, CircularProgress } from '@mui/material';
+import RateReviewIcon from '@mui/icons-material/RateReview';
+import { analyzeSentiment } from '../lib/api';
+function ReviewInput({
+  currentReview,
+  setCurrentReview,
+  isLoading,
+  setIsLoading,
+  setHasError,
+  setErrorMessage,
+  setAnalysisResult,
+  addToPreviousAnalyses
+}) {
+  const handleReviewChange = (e) => {
+    setCurrentReview(e.target.value);
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!currentReview) {
+      setHasError(true);
+      setErrorMessage('Please enter a review to analyze.');
+      return;
+    }
+    setIsLoading(true);
+    setHasError(false);
+    setErrorMessage('');
+    try {
+      const result = await analyzeSentiment(currentReview);
+      setAnalysisResult(result);
+      addToPreviousAnalyses({ ...result, text: currentReview });
+    } catch (error) {
+      console.error('Error analyzing sentiment:', error);
+      setHasError(true);
+      setErrorMessage(
+        error.message || 'An error occurred while analyzing the review. Please try again.'
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <Box component="form" onSubmit={handleSubmit} noValidate>
+      <Typography variant="h2" component="h2" gutterBottom>
+        Enter Movie Review
+      </Typography>
+      <TextField
+        fullWidth
+        variant="outlined"
+        multiline
+        rows={6}
+        placeholder="Type or paste a movie review here..."
+        value={currentReview}
+        onChange={handleReviewChange}
+        sx={{ mb: 2 }}
+        disabled={isLoading}
+      />
+      <Button
+        variant="contained"
+        color="primary"
+        startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : <RateReviewIcon />}
+        type="submit"
+        disabled={isLoading || !currentReview}
+        sx={{
+          px: 4,
+          py: 1.5,
+          fontSize: '1rem',
+          fontWeight: 'medium'
+        }}
+      >
+        {isLoading ? 'Analyzing...' : 'Analyze Sentiment'}
+      </Button>
+    </Box>
+  );
+}
+export default ReviewInput;

src/components/SentimentResult.js ADDED Viewed

	@@ -0,0 +1,124 @@

+import React from 'react';
+import { Box, Typography, Button, Paper, Chip, CircularProgress } from '@mui/material';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import ThumbDownIcon from '@mui/icons-material/ThumbDown';
+import RemoveIcon from '@mui/icons-material/Remove';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+function SentimentResult({ result, onNewAnalysis, currentReview }) {
+  const sentimentColor =
+    result.sentiment === 'positive' ? 'success.main' :
+    result.sentiment === 'negative' ? 'secondary.main' :
+    'warning.main';
+  const SentimentIcon =
+    result.sentiment === 'positive' ? ThumbUpIcon :
+    result.sentiment === 'negative' ? ThumbDownIcon :
+    RemoveIcon;
+  return (
+    <Box>
+      <Typography variant="h2" component="h2" gutterBottom>
+        Sentiment Analysis Result
+      </Typography>
+      <Box sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'row' },
+        alignItems: 'center',
+        gap: 2,
+        mb: 3
+      }}>
+        <Box sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1
+        }}>
+          <Typography variant="h3" component="span">
+            Sentiment:
+          </Typography>
+          <Chip
+            icon={<SentimentIcon />}
+            label={result.sentiment.charAt(0).toUpperCase() + result.sentiment.slice(1)}
+            sx={{
+              bgcolor: sentimentColor,
+              color: 'white',
+              fontWeight: 'bold',
+              fontSize: '1rem',
+              px: 1,
+              py: 2.5
+            }}
+          />
+        </Box>
+        <Box sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1
+        }}>
+          <Typography variant="h3" component="span">
+            Confidence:
+          </Typography>
+          <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+            <CircularProgress
+              variant="determinate"
+              value={result.confidence}
+              size={60}
+              thickness={5}
+              sx={{ color: sentimentColor }}
+            />
+            <Box
+              sx={{
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Typography variant="body1" component="div" fontWeight="bold">
+                {`${Math.round(result.confidence)}%`}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      {result.reasoning && (
+        <Paper variant="outlined" sx={{ p: 2, mb: 3, bgcolor: 'background.default' }}>
+          <Typography variant="h6" gutterBottom>
+            Analysis Details:
+          </Typography>
+          <Typography variant="body1">
+            {result.reasoning}
+          </Typography>
+        </Paper>
+      )}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Paper variant="outlined" sx={{ p: 2, flex: 1, mr: 2 }}>
+          <Typography variant="body2" color="text.secondary">
+            Original Review Text:
+          </Typography>
+          <Typography variant="body1" sx={{ mt: 1 }}>
+            {currentReview}
+          </Typography>
+        </Paper>
+        <Button
+          variant="outlined"
+          color="primary"
+          startIcon={<ArrowBackIcon />}
+          onClick={onNewAnalysis}
+        >
+          New Analysis
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+export default SentimentResult;

src/index.css ADDED Viewed

	@@ -0,0 +1,13 @@

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js ADDED Viewed

	@@ -0,0 +1,17 @@

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/lib/api.js ADDED Viewed

	@@ -0,0 +1,27 @@

+/**
+ * Makes a request to the sentiment analysis API endpoint
+ * @param {string} reviewText - The review text to analyze
+ * @returns {Promise<Object>} - The sentiment analysis result
+ */
+export async function analyzeSentiment(reviewText) {
+    try {
+      const response = await fetch(
+        'https://chethanmsrit-movie-sentiment-analysis.hf.space/sentiment', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ reviewText }),
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to analyze sentiment');
+      }
+      return await response.json();
+    } catch (error) {
+      console.error('Error analyzing sentiment:', error);
+      throw error;
+    }
+  }

src/logo.svg ADDED Viewed

src/pages/Home.js ADDED Viewed

	@@ -0,0 +1,91 @@

+import React, { useState } from 'react';
+import { Container, Typography, Box, Paper, Divider } from '@mui/material';
+import ReviewInput from '../components/ReviewInput';
+import SentimentResult from '../components/SentimentResult';
+import PreviousAnalyses from '../components/PreviousAnalysis';
+import AboutSection from '../components/AboutSection';
+export default function Home() {
+  const [currentReview, setCurrentReview] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [analysisResult, setAnalysisResult] = useState(null);
+  const [previousAnalyses, setPreviousAnalyses] = useState([]);
+  const handleViewPreviousAnalysis = (analysis) => {
+    setAnalysisResult(null);
+    setCurrentReview(analysis);
+  };
+  const addToPreviousAnalyses = (analysis) => {
+    // Add unique ID if it doesn't exist
+    const analysisWithId = analysis.id
+      ? analysis
+      : { ...analysis, id: Date.now(), createdAt: new Date() };
+    // Add to the beginning of the array to show newest first
+    setPreviousAnalyses(prev => [analysisWithId, ...prev]);
+  };
+  return (
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <Box mb={4} textAlign="center">
+        <Typography variant="h1" component="h1" gutterBottom>
+          Movie Review Sentiment Analysis
+        </Typography>
+        <Typography variant="h6" color="textSecondary">
+          Enter a movie review to analyze its sentiment using AI
+        </Typography>
+      </Box>
+      <AboutSection />
+      <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 3 }}>
+        <Box sx={{ flex: { xs: '1', md: '2' } }}>
+          <Paper elevation={2} sx={{ p: 3, mb: { xs: 3, md: 0 } }}>
+            {!analysisResult ? (
+              <ReviewInput
+                currentReview={currentReview}
+                setCurrentReview={setCurrentReview}
+                isLoading={isLoading}
+                setIsLoading={setIsLoading}
+                setHasError={setHasError}
+                setErrorMessage={setErrorMessage}
+                setAnalysisResult={setAnalysisResult}
+                addToPreviousAnalyses={addToPreviousAnalyses}
+              />
+            ) : (
+              <SentimentResult
+                result={analysisResult}
+                onNewAnalysis={() => setAnalysisResult(null)}
+                currentReview={currentReview}
+              />
+            )}
+            {hasError && (
+              <Box sx={{ mt: 2, p: 2, bgcolor: 'error.light', color: 'error.contrastText', borderRadius: 1 }}>
+                <Typography variant="body1">
+                  {errorMessage || 'An error occurred while analyzing the review. Please try again.'}
+                </Typography>
+              </Box>
+            )}
+          </Paper>
+        </Box>
+        <Box sx={{ flex: { xs: '1', md: '1' } }}>
+          <Paper elevation={2} sx={{ p: 3, mb: { xs: 3, md: 0 } }}>
+            <Typography variant="h2" component="h2" gutterBottom>
+              Previous Analyses
+            </Typography>
+            <Divider sx={{ mb: 2 }} />
+            <PreviousAnalyses
+              analyses={previousAnalyses}
+              onViewAnalysis={handleViewPreviousAnalysis}
+            />
+          </Paper>
+        </Box>
+      </Box>
+    </Container>
+  );
+}

src/pages/not-found.js ADDED Viewed

	@@ -0,0 +1,44 @@

+import React from 'react';
+import { Box, Typography, Button, Container } from '@mui/material';
+import { Link } from 'wouter';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import HomeIcon from '@mui/icons-material/Home';
+export default function NotFound() {
+  return (
+    <Container maxWidth="md">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '100vh',
+          textAlign: 'center',
+          py: 4
+        }}
+      >
+        <ErrorOutlineIcon sx={{ fontSize: 100, color: 'error.main', mb: 2 }} />
+        <Typography variant="h2" component="h1" gutterBottom>
+          Page Not Found
+        </Typography>
+        <Typography variant="h5" color="textSecondary" paragraph>
+          The page you're looking for doesn't exist or has been moved.
+        </Typography>
+        <Button
+          component={Link}
+          to="/"
+          variant="contained"
+          color="primary"
+          startIcon={<HomeIcon />}
+          sx={{ mt: 3 }}
+        >
+          Go to Home
+        </Button>
+      </Box>
+    </Container>
+  );
+}

src/reportWebVitals.js ADDED Viewed

	@@ -0,0 +1,13 @@

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+export default reportWebVitals;

src/setupTests.js ADDED Viewed

	@@ -0,0 +1,5 @@

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';