apphime

gistfile1.txt

import React, { useState, useEffect, Fragment, useContext } from 'react';
import '../css/app/App.css';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
import { AiContent } from '../contexts/ai_content.js';
import Topbar from '../../../Shared/Topbar';
import TopNav from '../../../Shared/Topnav';
import InnerNav from '../../../Shared/InnerNav';
import Slider from '@material-ui/core/Slider';
import Cards from '../../../Shared/Cards/ContentAutomationCart';
import ClipLoader from 'react-spinners/BeatLoader';
import { css } from '@emotion/core';
import Modal from 'react-modal';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import { Editor } from '@tinymce/tinymce-react';
import Axios from 'axios';
import { salesCopywritingWizard, loadScriptTemplate, autoSuggestioin, EmailExport } from '../../../../Config/Api';


const override = css`
	position: absolute;
	top: 70%;
	left: 50%;
	border-color: #f5b848;
	z-index:1000;
`;

const customStyles = {
	content: {
		width: '800px',
		top: '50%',
		left: '50%',
		right: 'auto',
		bottom: 'auto',
		marginRight: '-50%',
		transform: 'translate(-50%, -50%)',
	},
};
export function AppHome(props) {
	const [query, setQuery] = useState();
	const [scripts, setScripts] = useState();
	const [response, setResponse] = useState();
	const [subScript, setSubScript] = useState();
	const [AllScript, setAllScript] = useState();
	const [loading, setloading] = useState(false);
	const [ismodal, setIsmodal] = useState(false);
	const [success, setSuccess] = useState(false);
	const [questions, setquestions] = useState([]);
	const [finaloutput, setfinaloutput] = useState({});
	const [generatedOutputs, setgeneratedOutputs] = useState();
	const [ismodalscript, setismodalscript] = useState(false);
	const [generatedScript, setgeneratedScript] = useState('');
	const options = ['Select Script', 'Authority Headlines'];

	const [stage, setStage] = useState("0");
	const defaultOption = options[0];



	function changeQuery(event) {

		setQuery(event.target.value);
	}

	// Get SubScripts Function
	const goToStep2 = async () => {

		await Axios.get("https://api.crawlq.ai/Sales-Copywriting-Wizard/select?user_id=410&project_id=null")
			.then((res) => {
				console.log(res.data.data['Authority Power Headlines'])
				setResponse(res.data.data['Authority Power Headlines'])

			})
		setStage("1")

	}


	const onSelectDropDown = (e) => {
		console.log(e.value)
		const selectedScript = e.value;
	}


	const handleNext = async () => {
		setloading(true);

		var body = new FormData();

		let output = [];
		let input_questions = [];
		for (var i = 0; i < Object.keys(finaloutput).length; i++) {
			output.push(Object.values(finaloutput));
			input_questions.push(Object.keys(finaloutput));
		}
		await body.append('data', JSON.stringify(output[0]));
		Axios.post(`https://api.crawlq.ai/Ai-Sales-Copywriting-Wizard/build-script/${subScript}`, body)

			.then((res) => {
				console.log(res.data.output);

				// console.log(assert.equal(stripHtml(res.data.output).result))

				// console.log(text)
				setgeneratedScript(res.data.output);
				setismodalscript(true);
				setloading(false);
				setStage(4);
			})
			.catch((err) => {
				console.log(err);
				setloading(false);
			});
	};


	// UI - GET INPUT FOR GPT3 
	const step1 = () => {
		return (
			<div className="script col-sm-6 brder text-center">

				<div className="card no-margin card-new">

					<h6>Enter your Initial Content Idea</h6>

					<input
						id="seatch_topic"
						class="form-control"
						placeholder="Enter your unique idea"
						onChange={changeQuery}
					></input>

					<p style={{ marginTop: '1rem' }}>Select a script to generate text</p>

					<Dropdown options={options} value={defaultOption} onChange={onSelectDropDown} placeholder="Select an option" />

					<button style={{ width: '20px', marginTop: '20px', textAlign: 'center' }} onClick={goToStep2} className="btn-create">Next <i class="fa fa-arrow-right" aria-hidden="true"></i></button>


				</div>
			</div>

		);
	};

	//UI - SELECT SUB-SCRIPTS
	const step2 = () => {
		return (
			<div className="col-sm-6 brder-left text-center">

				<div className="card no-margin card-new">

					<h6 >Select Subscripts</h6>
					<div style={{ marginBottom: '12px', width: '100%', borderBottom: '1px solid #000' }}></div>
					<div className="script-sub" >
						{response.map((element) => (
							<div>
								<input onClick={changeSubScript} type="radio" name="script" id={element.script_id} value={element.script_name} />
								<label for={element.script_id}>{element.script_name}</label>
								{/* <p id={element.script_id} onClick={changeSubScript}> {element.script_name}</p> */}
							</div>
						))}

					</div>

					<input type="radio" id="male" value="male" />

					<button style={{ textAlign: 'center' }} onClick={goToStep3} className="btn-create">Next <i class="fa fa-arrow-right" aria-hidden="true"></i></button>

				</div>
			</div>

		);
	};

	// UI - Fill With Examples
	const step3 = () => {
		return (
			<div className="card no-margin card-new2">

				<div >

					<div className="ai-btn double-button">
						<button className="btn-green" onClick={hadlefillexample}>
							Fill with example
						</button>
						<button onClick={handleNext} className="btn-create">Next <i class="fa fa-arrow-right" aria-hidden="true"></i></button>

					</div>
					<div >{questions.map((question, i) => (
						<div>

							<p className="question-nw">{question.input_question}</p>
							<input type="text"
								onChange={(e) => handleQuestion(i, e, question)}
								value={
									finaloutput[question.input_question] !== undefined ? finaloutput[question.input_question] : ''
								}
								name={question.input_question}
							/>
							<p>{question.question_example}</p>

						</div>
					))}
					</div>

				</div>
			</div>
		)

	}

	//UI - Final
	const createDoc = () => {
		return (
			<div className="card no-margin card-new2">
				<Link to={{ pathname: '/ai-content-writer/app', query, generatedOutputs }}
				>
					{' '}
					<div style={{ color: 'black' }}>
						<h5>Text Generation Completed</h5>
						<p>Follow these steps to attain a good document.</p>
						<p><strong>Step 1:</strong> Click on the button Create Document and all results related to main topic will be preseented to you on the right panel, including topics, relevant paragraphs from top sources, questions and reviews on your topic if available.</p>
						<p><strong>Step 2:</strong> Start building your content using outline, research, rewording and optimize the content for better topic coverage</p>
					</div>

					<button style={{ marginTop: '22px', textAlign: 'center' }} className="btn-create">Create Document <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
				</Link>
			</div>
		)
	}

	const changeSubScript = (e) => {
		console.log(e.target.id);
		setSubScript(e.target.id);

	}

	// load Scripts 
	function goToStep3() {
		Axios.get(
			'https://api.crawlq.ai/Ai-Sales-Copywriting-Wizard/load-script/' +
			// 'http://ec2-18-224-182-202.us-east-2.compute.amazonaws.com:9000/Sales-Copywriting-Wizard/load-script/' +
			subScript +
			'?username=' +
			localStorage.getItem('username') +
			'&name=' +
			localStorage.getItem('project_name')
		).then((res) => {

			console.log(res)
			setquestions(res.data.script.questions);
			let arr = {};
			res.data.script.questions.map((value, index) => {
				arr[value.input_question] = value.answer;
			});
			setfinaloutput(arr);
			setStage(3)
		})
	}



	function handleQuestion(e, i, question) {

		setfinaloutput({
			...finaloutput,
			[e.target.name]: e.target.value
		})

	}



	const onChange = (e) => {
		console.log(e.target.getContent());

	}


	const handleSaveScript = async () => {
		setloading(true);
		let output = [];
		let input_questions = [];
		var body = new FormData();

		console.log("gsss" + generatedScript);
		var get_html = document.createElement("div");
		get_html.innerHTML = generatedScript;

		await body.append('p', generatedScript);
		await body.append('batchSize', 5);
		await body.append('query', query)
		Axios.post(`https://api.crawlq.ai/v1/generate-paragraph/`, body)
			// Axios.post(`http://ec2-18-224-182-202.us-east-2.compute.amazonaws.com:9000/v1/generate-paragraph/`, body)
			.then((res) => {
				console.log(res.data.generated_text);
				setgeneratedOutputs(res.data.generated_text)

				setloading(false);
				setSuccess(true);
				setStage(5)

			})
			.catch((err) => {
				setSuccess(false);
				console.log(err);
				setloading(false);
			});
	};

	const hadlefillexample = () => {
		console.log(questions);
		let quest = {};

		for (var i = 0; i < questions.length; i++) {
			console.log(questions[i]);
			quest[questions[i]['input_question']] = questions[i]['example_mapping'];
		}

		console.log(quest);
		setfinaloutput(quest);
	};

	const VieStepsModal = () => {
		//function for displaying the Steps  modal

		return (
			<Modal
				isOpen={ismodal}
				onRequestClose={handleModal}
				style={customStyles}
				ariaHideApp={false}
			>
				<div>
					<div className="right-head">
						<h5>Steps</h5>
					</div>
					<div className="modal-content-wrap">
						<p>
							<span className="stepper"> Step 1</span>: Enter the main Heading (H1) related to your article (e.g., 7 Brutal economic consequences of the outbreak of the second wave of Covid-19 in 2020).
				</p>
						<p>
							<span className="stepper"> Step 2</span>: Provide a short introductory text that more closely matches the main title (H1) of your article.
				</p>
						<p>
							<span className="stepper"> Step 3</span>: You can add subtitles and subsections by clicking on + button.
				</p>
						<p>
							<span className="stepper"> Step 4</span>: At the end of each sub-heading (H2), you can choose the content length to generate the content according to the specified content length.
				</p>
						<p>
							<span className="stepper"> Step 5</span>: You can also enter domain-specific keywords, separated by spaces or commas, to target your content more specifically.
				</p>
						<p>
							<span className="stepper"> Step 6</span>: You can repeat steps 3, 4, and 5 to create a template for your content.
				</p>
						<p>
							<span className="stepper"> Step 7</span>: Click on the Build button and you will see the desired content generated with CrawlQ AI Content Writer (Beta).
				</p>
						<div className="modal-buttons">
							<button onClick={handleModal} className="btn btn-secondary">
								Close
				  </button>
						</div>
					</div>
				</div>
			</Modal>
		);
	};
	const handleModal = () => {
		//function for opening and closing the modal
		setIsmodal(!ismodal);
	};
	return (
		<Fragment>
			{VieStepsModal()}
			<TopNav />
			<div className="main-content" id="panel">
				<Topbar />
				<div className="mt--12">
					<InnerNav />
				</div>
				<div className="mt--12 modify-mt--12">
					<Cards />
				</div>
				<div className="mt--6">
					<h6 className="subhead">
						AI-powered Content Writer that automatically generates unique, comprehensive, high-quality articles for sales and SEO in under 60 seconds.
						<button onClick={handleModal}>View Steps</button>
					</h6>
					<br />
					<div className="sweet-loading">
						<ClipLoader css={override} size={20} color={'#123abc'} loading={loading} />
					</div>
					<div className="row wrap modify-rewrite v-middle">

						{stage == 0 ? step1() : (<div></div>)}
						{stage == 1 ? step2() : (<div></div>)}
						{stage == 3 ? step3() : (<div></div>)}
						{stage == 4 ? (<div className="card no-margin card-new2">
							<button style={{ textAlign: 'right', marginBottom: '12px' }} onClick={handleSaveScript} className="btn-create">Generate <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
							<Editor
								apiKey="tryts89jkngepe1w4pwbaix6adi2fdttpdueuhgh9p6p5yym"
								initialValue={generatedScript}
								onChange={onChange}
							/>


						</div>

						) : (<div></div>)}
						{stage == 5 ? createDoc() : (<div></div>)}

						<div className="col-sm-7">
							<div className="row">
								<div className="app_body custom-background">
									<div class="container content">
										<div class="row">
											<div class="col-md-6 col-md-offset-3 align-middle">
												<div class="panel panel-default">
													<div class="panel-heading panel-heading-color">

													</div>
													<div class="panel-body">

														<form class="form-content">


														</form>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Fragment>
	);
}
export default AppHome;


// 
//