Journal Of Nowledge(Satirical Scientific Journal)

App.js

import React from 'react';
import { Grid, Typography } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme'; // Replace with your theme file path
import Header from './components/Header/Header';
import FeaturedArticle from './components/FeaturedArticle/FeaturedArticle';
import CardList from './components/CardList/CardList';
import ContentGenerator from './components/ContentGenerator/ContentGenerator';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={2}>
        <Header />
        <Grid container direction="row" justifyContent="flex-start" >
          {/* Main column with Featured Article */}
          <Grid item xs={12} lg={9}>
            <FeaturedArticle />
          </Grid>
          {/* Side column with other article links */}
          <Grid item xs={12} lg={3} >
            <CardList />
          </Grid>
        </Grid>
      </Grid>
      <ContentGenerator />
    </ThemeProvider>
  );
}

export default App;

CardList.js

import React from 'react';
import { Grid, Typography, CardMedia } from '@mui/material';
const imageUrl = `${process.env.PUBLIC_URL}/images/hiking.jpeg`;
const imageUrlTwo = `${process.env.PUBLIC_URL}/images/risingsea.webp`;

function CardList() {
  return (
    <Grid container sx={{ p: 3 }}> {/* Adjust spacing as needed */}
      <Grid > {/* Each column spans full width */}
        <Grid container spacing={2}> {/* Stack items vertically */}
          <Grid item xs={12} md={6} lg={12} >
            <CardMedia
              component="img"
              height="200"
              image={imageUrl}
              alt="Card Article"
            />
            <Typography variant="h5" component="h2">
              Conquering the Mountains: A Beginner's Guide to Hiking
            </Typography>
            <Typography variant="body2" color="textSecondary">
              Embark on an adventure, one step at a time. Hiking presents the perfect opportunity to immerse yourself in nature's splendor, challenge your physical limits, and forge unforgettable memories. Whether you're a seasoned mountaineer or a novice explorer, this guide will equip you with the essential knowledge to take your first steps on the trail.
            </Typography>
          </Grid>
          <Grid item xs={12} md={6} lg={12} >
            <CardMedia
              component="img"
              height="200"
              image={imageUrlTwo}
              alt="Card Article"
            />
            <Typography variant="h5" component="h2">
              Impact of rising sea levels on coastal ecosystems
            </Typography>
            <Typography variant="body2" color="textSecondary">
              A recent study conducted by the Oceanographic Institute of Aqualane revealed a concerning correlation between rising sea levels and the decline of coral reefs in the South Pacific. Researchers observed a 20% decrease in coral cover in areas experiencing just a 10 cm increase in sea level, highlighting the delicate balance of these vulnerable ecosystems.
            </Typography>
          </Grid>
          {/* ... More columns in Grid items ... */}
        </Grid>
      </Grid>
    </Grid>
  );
}

export default CardList;

ContentGenerator.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Typography, TextField, Button } from "@mui/material";

function ContentGenerator() {
  const [question, setQuestion] = useState('');
  const [generatedPaper, setGeneratedPaper] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const [mainBody, setMainBody] = useState('');
  const [conclusion, setConclusion] = useState('');
  const [references, setReferences] = useState([]);
  const [abstract, setAbstract] = useState('');

  const parsePaper = (text) => {
    // Customize parsing logic based on your prompts and expected formatting
    const titleIndex = text.indexOf('Title:');
    const authorIndex = text.indexOf('Author:');
    const abstractIndex = text.indexOf('Abstract');
    const mainBodyIndex = text.indexOf('Main Body');
    const conclusionIndex = text.indexOf('Conclusion');
    const referencesIndex = text.indexOf('References');
  
    const parsedTitle = text.slice(titleIndex + 7, authorIndex).trim();
    const parsedAuthor = text.slice(authorIndex + 7, abstractIndex).trim();
    const parsedAbstract = text.slice(abstractIndex + 9, mainBodyIndex).trim();
    const parsedMainBody = text.slice(mainBodyIndex + 10, conclusionIndex).trim();
    const parsedConclusion = text.slice(conclusionIndex + 11, referencesIndex).trim();
    const parsedReferences = text.slice(referencesIndex + 11).trim().split('\n').slice(1);
  
    setTitle(parsedTitle);
    setAuthor(parsedAuthor);
    setReferences(parsedReferences || []);
    setMainBody(parsedMainBody);
    setConclusion(parsedConclusion);
    setAbstract(parsedAbstract);
  
    return { title: parsedTitle, author: parsedAuthor, mainBody: parsedMainBody, conclusion: parsedConclusion, references: parsedReferences, abstract: parsedAbstract, content: text };
  };      

  useEffect(() => {
    // Initial generation with example question
    setQuestion('');
  }, []);

  const handleQuestionChange = (e) => {
    setQuestion(e.target.value);
  };

  const handleGeneratePaper = async () => {
    try {
      setLoading(true);
      setError(null);

      // Fixed template literal syntax:
      const prompts = [
        {
          role: 'system',
          content: `Answer this question as a scientific research paper with a lot of technical jargon including references and a conclusion: ${question}. Output the question so that I can parse it by title, author, mainbody, conclusion, references, and abstract. Author name should be a human name, not AI`
        },
        {
          role: 'user',
          content: `${question}`
        }
      ];
      const response = await axios.post(
        'https://api.openai.com/v1/chat/completions',
        {
          model: 'gpt-3.5-turbo',
          messages: prompts,
          // temperature: 0.6, // Adjust as needed
          max_tokens: 4000, // Adjust for desired length
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`
          }
        }
      );

      const parsedPaper = parsePaper(response.data.choices[0].message.content);
      setGeneratedPaper(parsedPaper);
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <TextField label="Research Question" value={question} onChange={handleQuestionChange} />
      <Button variant="contained" onClick={handleGeneratePaper} disabled={loading}>
        {loading ? 'Generating...' : 'Generate Research Paper'}
      </Button>

      {error && <Typography variant="body1" color="error">{error.message}</Typography>}

      {generatedPaper && (
        <div>
          <h1>{title}</h1>
          <p>Author: {author}</p>

          <div>
            <h2>Abstract</h2>
            <p>{abstract}</p>
          </div>

          <div>
            <h2>Main Body</h2>
            <p>{mainBody}</p>
          </div>

          <div>
            <h2>Conclusion</h2>
            <p>{conclusion}</p>
          </div>

          <div>
            <h2>References</h2>
            <ul>
              {references.map((reference, index) => (
                <li key={index}>{reference}</li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </>
  );
}

export default ContentGenerator;

FeaturedArticle.js

import React from 'react';
import { Grid, Typography, CardMedia } from '@mui/material';

function FeaturedArticle() {
  const imageUrl = `${process.env.PUBLIC_URL}/images/anglerfish.png`;

  return (
    <Grid container >
      <Grid item xs={12}> {/* Image spans full width */}
        <CardMedia
          component="img"
          height="600"
          image={imageUrl}
          alt="Featured Article"
          sx={{ mt: 3 }}
        />
      </Grid>
      <Grid item xs={12} sx={{ p: 3 }}> {/* Content container with padding */}
        <Typography variant="h5" component="h2">
          Unveiling the Mysteries of the Deep Sea: New Discoveries in Bioluminescence
        </Typography>
        <Typography variant="body2" color="textSecondary">
          Dive into the mesmerizing world of the deep sea, where darkness reigns and life finds extraordinary ways to illuminate its own existence. Recent discoveries have shed light on the hidden wonders of bioluminescence, a captivating phenomenon where living organisms create their own light. From the ethereal glow of a comb jelly to the hypnotic dance of bioluminescent plankton, these creatures paint the ocean depths with a symphony of shimmering lights.

          Researchers are uncovering the secrets behind this remarkable adaptation. Bioluminescence serves diverse purposes, from attracting prey and mates to camouflaging against predators. The chemical reactions behind bioluminescence are as varied as the creatures themselves, offering fascinating insights into the evolutionary ingenuity of life in the deep.

          But beyond the scientific intrigue, bioluminescence also evokes a sense of awe and wonder. It's a reminder of the hidden beauty and diversity that lies within our planet's oceans, prompting us to explore, protect, and cherish these fragile ecosystems.
        </Typography>
      </Grid>
    </Grid>
  );
}

export default FeaturedArticle;

Header.js

import React from 'react';
import { AppBar, Toolbar, Typography, Grid } from '@mui/material';
import theme from '../../theme';

const Header = () => (
  <AppBar position="static">
    <Toolbar>
      <Grid container justifyContent="space-between" alignItems="center">
        <Grid item xs={6}>
          <Typography variant="h2" color="secondary">
            Journal of Nowledge
          </Typography>
        </Grid>
        <Grid item xs={6}>
          {/* Add navigation links or publication information here */}
        </Grid>
      </Grid>
    </Toolbar>
  </AppBar>
);

export default Header;

index.js

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();