<commit_before>import {
  createStyles,
  Grid,
  makeStyles,
  Paper,
  Theme,
} from "@material-ui/core";
import Head from "next/head";
import Image from "next/image";
import DemoContainer from "../components/DemoContainer";
import { useError } from "../hooks/useError";
import { useTranslation } from "../hooks/useTranslation";
import { demos } from "../src/demos";
import GettingStarted from "../src/serverlessWebAppWithDevOps/components/GettingStarted";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    panel: {
      padding: theme.spacing(4),
    },
    architecture: {},
  })
);

const demo = demos["serverlessWebAppWithDevOps"];

const ServerlessWebAppWithDevOps: React.FC = () => {
  const { t } = useTranslation();
  const classes = useStyles();
  const { errorMessage, onCloseError } = useError();

  return (
    <DemoContainer
      title={t.serverlessWebAppWithDevOps.title}
      description={t.serverlessWebAppWithDevOps.description}
      instructions={t.serverlessWebAppWithDevOps.instructions}
      productIds={demo.products}
      errorMessage={errorMessage}
      onCloseError={onCloseError}
    >
      <Head>
        <title>
          {t.serverlessWebAppWithDevOps.title} | {t.title}
        </title>
      </Head>
      <Grid item>
        <Paper className={classes.panel}>
          <Image
            src="/images/serverlessWebAppWithDevOps/architecture.png"
            alt="Architecture of serverless web app with DevOps"
            className={classes.architecture}
            width={2017}
            height={781}
          />
        </Paper>
      </Grid>
      <Grid item>
        <Paper className={classes.panel}>
          <GettingStarted />
        </Paper>
      </Grid>
    </DemoContainer>
  );
};<commit_msg>:fire: [web] Remove unused class<commit_after>import {
  createStyles,
  Grid,
  makeStyles,
  Paper,
  Theme,
} from "@material-ui/core";
import Head from "next/head";
import Image from "next/image";
import DemoContainer from "../components/DemoContainer";
import { useError } from "../hooks/useError";
import { useTranslation } from "../hooks/useTranslation";
import { demos } from "../src/demos";
import GettingStarted from "../src/serverlessWebAppWithDevOps/components/GettingStarted";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    panel: {
      padding: theme.spacing(4),
    },
  })
);

const demo = demos["serverlessWebAppWithDevOps"];

const ServerlessWebAppWithDevOps: React.FC = () => {
  const { t } = useTranslation();
  const classes = useStyles();
  const { errorMessage, onCloseError } = useError();

  return (
    <DemoContainer
      title={t.serverlessWebAppWithDevOps.title}
      description={t.serverlessWebAppWithDevOps.description}
      instructions={t.serverlessWebAppWithDevOps.instructions}
      productIds={demo.products}
      errorMessage={errorMessage}
      onCloseError={onCloseError}
    >
      <Head>
        <title>
          {t.serverlessWebAppWithDevOps.title} | {t.title}
        </title>
      </Head>
      <Grid item>
        <Paper className={classes.panel}>
          <Image
            src="/images/serverlessWebAppWithDevOps/architecture.png"
            alt="Architecture of serverless web app with DevOps"
            width={2017}
            height={781}
          />
        </Paper>
      </Grid>
      <Grid item>
        <Paper className={classes.panel}>
          <GettingStarted />
        </Paper>
      </Grid>
    </DemoContainer>
  );
};
{'fraction_non_alphanumeric': 0.13108185460789926, 'fraction_numerical': 0.0045792787635947334, 'mean_word_length': 2.8113413304253, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3735243', 'n_tokens_mistral': 1049, 'n_tokens_neox': 1030, 'n_words': 204}